在线打开pdf,js使用教程

By admin in 4858美高梅 on 2019年4月12日

天记录二个js库:pdf.js。首假若完结在线打开pdf成效。因为品种须要需求能在线查看pdf文书档案,所以就钻探了一晃那个控件。

眼下项目要求完毕在线预览pdf文件功效,找来找去,发现有个pdf.js的类库挺好用,直接用js完毕在线预览。
pdf.js是开源项目,github的地址:
https://github.com/mozilla/pdf.js
基于教程教导,有以下多少个步骤:

pdf.js使用教程

pdf.js框架的吸引力所在,为其为HTML伍兑现的,无需任啥地点方帮忙,而且对浏览器的包容性也是相比好,要求唯有3个:浏览器援助HTML5就好了!(然则对于低版本的IE,就不得不节哀了!)

流言IE九之上是OK的,因为作者本地是IE11,所以本身只在IE1一上测试过,是由此的(当然火狐,360,笔者也测了一晃,是能够的)。

因为品种支出必要,在线体现PDF,而且要包容IE,所以就选用了pdf.js,然而网上对他的教程很少,笔者花了一天时间才消除,回头看了弹指间,也未有设想中那么狼狈,所以决定写一篇博客,以便咱们参考!

以下是pdf.js相关的网站:

GitHub:

上边这几个网站,有pdf.js的焦点简介,以及怎么样赢得源码,之后如何进展构建!

但是她的取得源码使用:

$ git clone git://github.com/mozilla/pdf.js.git

创设利用:

$ node make generic

不清楚在Windows七上该怎么用git、node(倘使有知情的,能够告诉本人下,在此谢过!),所以本身就改用linux进行营造(时期有过多苦涩历程,感觉都能够拍成都电子通信工程高校影了!!!比如说小编用git获取源码时,系统提醒笔者git未有安装,小编用node时,提醒作者ShellJs未有设置,安装ShellJS,他告诉笔者要运用npm,不出所料,npm作者也未曾安装…),其实,大家选用pdf.js,最后只必要构建后的内容,我们能够透过那里实行下载:

——————————————分割线——————————————

免费下载地址在

用户名与密码都以www.bkjia.com

现实下载目录在 /20壹5年龄资历料/10月/二三十一日/pdf.js使用教程/

下载方式见

——————————————分割线——————————————

营造后的目录结构为:

有了构建后的build内容,大家就可以做2个粗略的测试,把generic拷贝到汤姆cat的webapps中

4858美高梅 1

起初汤姆cat后,就能够透过:

实行访问!能够见到三个很帅气的界面:

4858美高梅 2

generic/web/viewer.html主假设渲染pdf阅读器的体裁,而generic/web/viewer.js则是钦定打开的pdf文件(当然还有其余功效,不过那几个都不是大家关心的),我们看位于generic/web/viewer.js的一段代码:

4858美高梅 3

小编们得以看看,他暗中认可打开generic/web/compressed.tracemonkey-pldi-0九.pdf文件,再来看下边那段代码:

4858美高梅 4

这就告诉大家,能够因而传递file形参来动态内定打开的pdf文件!如:

下边我就介绍下,具体嵌入项目中是如何选取的!

能够把generic中的内容作为第三方插件进行利用,在档次中得以像如下存放:

4858美高梅 5

下一场页面能够利用<iframe>标签来加载pdf

<iframe src=”<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html”
/>?file=<c:url value=”/publicity/displayPDF.do” />”
width=”100%” height=”800″></iframe>

效果图,如下:

4858美高梅 6

实为正是大家直接待上访问generic/web/viewer.html,然后为其钦定二个file形参,用于钦命打开的pdf文件!作者上边使用的流的艺术举行点名的。

地点只是一种不难的施用办法,上边介绍一种复杂点的运用格局:

不知晓我们有未有试过上面那段url请求:

 大家在实际应用中,或许会基于分化的参数,来抉择呈现不相同的pdf文件,此时就涉嫌到传参的标题了,仔细察看地点那段url地址会意识,在file请求参数中的值为3个url地址,而这几个url地址又充实了和睦的伏乞参数,这就招致二个url地址中出现贰个”?”

造成浏览器不可能健康解析那段url!

壹种缓解思路是:大家可以把file形参的值,先编码,然后再解码来解决这么些题材!

那时候,就足以请encodeUPRADOIComponent()函数出场了!因为其为js函数,所以供给在文书档案就绪函数中动态为iframe设置src的值,如下所示:

<%@ page contentType=”text/html;charset=GBK” language=”java” %>
<%@ taglib prefix=”c” uri=”” %>
<script type=”text/javascript”>
    $(function(){
        $(“#在线打开pdf,js使用教程。displayPdfIframe”).attr(“src”,'<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html” />?file=’ +
encodeURIComponent(‘<c:url value=”/displayPDF.do?id=${id}”/>’));
    });
</script>
<div class=”ctrlDiv”>
    <div class=”eleContainer elePaddingBtm”>
        <iframe id=”displayPdfIframe” width=”100%”
height=”100%”></iframe>
    </div>
</div> 

既然有编码,那么就必将要有解码来分析他,然而那些工作generic/web/viewer.js已经替大家做过了,如下所示:

4858美高梅 7

时至前几天,pdf.js插件的牵线就告1段落了,第3次写博客,如有不到之处,希望我们能够不吝赐教,多谢!

在此感激pdf.js的两位作者!(真心钦佩这么些海外民代表大见面,二私人住房能够写二个那样好的框架,而且依然开源的!)。

正文永久更新链接地址:

pdf.js框架的魔力所在,为其为HTML五达成的,无需任哪个地方方补助,而且对浏览器的包容性也是相比较好,需要唯有1个:浏览器支…

pdf.js框架的魔力所在,为其为HTML5落到实处的,无需任哪儿方帮助,而且对浏览器的兼容性也是比较好,要求唯有三个:浏览器扶助HTML伍就好了!(不过对于低版本的IE,就只好节哀了!)

几个人很愕然,在线打开pdf文书档案浏览器不是永葆啊。是的您说的都以现代浏览器,例如谷歌(谷歌),360,edg等。

  • clone源码到地点,要是是linux的话很便宜,windows的话要此外下载git工具;
    git地址:https://git-for-windows.github.io/
    下载按暗许安装形式就行,然后在开首菜单找到git打开git
    cmd就足以clone源码,当然,也得以直接download源码,可是国内的下载的进度其实是太慢了,可以改变hosts文件加速下载,在hosts文件添加:

听别人讲IE玖之上是OK的,因为作者本地是IE1一,所以作者只在IE11上测试过,是透过的(当然火狐,360,小编也测了一下,是足以的)。

可是很倒霉的是大家那些体系是要利用大家最开心(很烦)的浏览器IE。全部要想使IE能够在线读取pdf,我就领会两种格局第一种下载Acrobat
Reader插件,第一正是采纳js库了。

因为项目支出供给,在线呈现PDF,而且要包容IE,所以就采用了pdf.js,可是网上对她的教程很少,小编花了1天时间才消除,回头看了壹晃,也一贯不想象中那么难堪,所以决定写一篇博客,以便大家参考!

介绍pdf.js

pdf.js是一个开源的js库。

官网: 

源码地址:

185.31.16.184 github.global.ssl.fastly.net

以下是pdf.js相关的网站:

下载并解压

我们在http://mozilla.github.io/pdf.js/getting\_started/\#download当选版本后下载后解压会生成七个文件夹:

4858美高梅 8

那三个文件夹主旨文件便是build文件下的js文件,web文件是官方给写好的卷入示例,你你可挑选使用或许不使用。

├── LICENSE
├── build/
│   ├── pdf.js                             - 显示层
│   └── pdf.worker.js                      - 核心层
└── web/
    ├── cmaps/                             - 字符映射(由核心要求)
    ├── compressed.tracemonkey-pldi-09.pdf - 测试 pdf
    ├── debugger.js                        - 有帮助的PDF调试功能
    ├── images/                            - 观看者和注释图标的图像
    ├── l10n.js                            - 汉化
    ├── locale/                            - 翻译文件
    ├── viewer.css                         - viewer 页面样式
    ├── viewer.html                        - viewer 页面
    └── viewer.js                          - viewer js

PS:其实大家接纳pdf.js,只须求创设后的剧情,我们能够到作者的百度云盘下载:http://pan.baidu.com/s/1bDK8Zs
,下载后复制generic到tomcat的webapps下,这样访问
http://localhost:8080/web/viewer.html
能看到demo效果,跳过以下步骤,直接到花色并入。

GitHub:

 使用:

选用pdf.js有二种格局:

  • 第二种接纳官方给写好的言传身教,简而言之正是地点提到的下载下来的web文件夹。
  • 第二种正是和谐调用API自身写方法达成,相对于第3种借使自个儿要的法力不是很多也许友好写。也不是很复杂很简单完成。官方给的代码太多修改维护太难为。
  • clone好源码后采纳nodejs的包管理工科具npm安装gulp营造筑工程具,如下:

位置这几个网站,有pdf.js的宗旨简介,以及如何获取源码,之后怎样进展构建!

利用官方示例:

运用官方示例其实正是利用pdfjs已经写好的viewer.html页面,例子:4858美高梅 ,http://mozilla.github.io/pdf.js/web/viewer.html做的机能比较周到。

粗略的来说一下吗,很多少人恐怕下载之后平素打开会报错,其实那是因为出现了三个难题:第多少个是一向不公文,第二个是领悟写文件可是存在跨域。就会生出如下错误:

4858美高梅 9

并发这几个题材其实也清闲,只要大家引用到品种后就不会产出了。然后是大家在动用的地方打开那几个页面并且增加文件即可:

  window.location.href = "../../Content/js/PDFShow/padjs/web/viewer.html?file=pdfTest.pdf";

功能呈现:

4858美高梅 10

然则他的获得源码使用:

 自个儿完毕分页版:

咱俩协调完成的话就不须要web文件夹下的事物。你就足以去除了。

投机定义完成谈到来也是相当粗略的,官方上1度给了多如牛毛代码示例了。废话作者就隐瞒了。作者就上一下自家的代码吧。

率先引进pdf.js文件到页面:

    <script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

引入pdf.js之后:

4858美高梅 114858美高梅 12

 //引入pdf.js之后
        var url = '../pdfTest.pdf';
        PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';
        //定义变量
        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');

        function renderPage(num) {
            pageRendering = true;
            pdfDoc.getPage(num).then(function (page) {
                //设置页面大小
                var viewport = page.getViewport(1);
                console.log(viewport.width);
                var desiredWidth = "1000";
                var scale = desiredWidth / viewport.width;
                var scaledViewport = page.getViewport(scale);
                //var viewport = page.getViewport(scale);
                canvas.height = scaledViewport.height;
                canvas.width = scaledViewport.width;
                //设置背景颜色(无效)
                canvas.style.backgroundColor = "red";
                //进行文件读取加载
                var renderContext = {
                    canvasContext: ctx,
                    viewport: scaledViewport
                };
                var renderTask = page.render(renderContext);

                renderTask.promise.then(function () {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // New page rendering is pending
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
            //显示总页数
            document.getElementById('page_num').textContent = pageNum;
        }
                        //翻页方法
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
        //上一页监听
        document.getElementById('prev').addEventListener('click', onPrevPage);

        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
        //下一页监听
        document.getElementById('next').addEventListener('click', onNextPage);

        PDFJS.getDocument(url).then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;

            renderPage(pageNum);
        });

View Code

相应html代码:

<body style="background:#404040">
    <div>
        <button id="prev">上一页</button>
        <button id="next">下一页</button>

        Page:  / 
    </div>

    <div style="width:100%;height:100%;background:#404040">
        <div style=" width:1000px;margin: 0 auto;">
            <canvas id="the-canvas"></canvas>
        </div>
    </div>
</body>

效能显示:

4858美高梅 13

npm install -g gulp-cli

$ git clone git://github.com/mozilla/pdf.js.git

 本人完成不分页版:

即使分页很好用,然而确不肯定使用具有的场景,比如本身哪怕想叁回性打开全部页面然后滚动查看跟读word似的,咋办,有艺术,当然是促成不分页喽,哈哈。

分页好精通啊:依照页数读取然后把读取的剧情放到画布上就好了,既然大家知晓分页的原理,那么大家稍稍改造一下正是不分页了啊。

不分页:我们任何读出来放到页面不就好了吗,简单的说是那些样,然则实际思路是=》大家先获得到持有页数,然后遍历的把每一页像分页一下放到画布上出示,然后在遍历相同数量画布来对号入座每页的剧情,最终表现出来。

好了大约的思绪已经精通了下边便是撸代码:

要么不要遗忘引用js文件:

 <script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

页面布局就足以那样子了:

   <div style="width:100%;height:100%;background:#404040">
        <div id="pdf-container" style=" width:1000px;margin: 0 auto;">
        </div>
    </div>

然后伊始化控件吧:

4858美高梅 144858美高梅 15

  <script>
        //引入pdf.js之后
        //
        var url = '../pdfTest.pdf';
        PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';

        window.onload = function () {

            //创建canvas方法
            function createPdfContainer(id, className) {
                var pdfContainer = document.getElementById('pdf-container');
                var canvasNew = document.createElement('canvas');
                canvasNew.id = id;
                canvasNew.className = className;
                pdfContainer.appendChild(canvasNew);
            };

            //渲染pdf
            function renderPDF(pdf, i, id) {
                pdf.getPage(i).then(function (page) {
                    //默认设置文档的显示大小
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);

                    //
                    //  准备用于渲染的 canvas 元素
                    //

                    var canvas = document.getElementById(id);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    //
                    // 将 PDF 页面渲染到 canvas 上下文中
                    //
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            };
            //创建和pdf页数等同的canvas数
            function createSeriesCanvas(num, template) {
                var id = '';
                for (var j = 1; j <= num; j++) {
                    id = template + j;
                    createPdfContainer(id, 'pdfClass');
                }
            }
            //读取pdf文件,并加载到页面中
            function loadPDF(fileURL) {
                PDFJS.getDocument(fileURL).then(function (pdf) {
                    //用 promise 获取页面
                    var id = '';
                    var idTemplate = 'cw-pdf-';
                    var pageNum = pdf.numPages;
                    //根据页码创建画布
                    createSeriesCanvas(pageNum, idTemplate);
                    //将pdf渲染到画布上去
                    for (var i = 1; i <= pageNum; i++) {
                        id = idTemplate + i;
                        renderPDF(pdf, i, id);
                    }
                });
            }
            //启动
            loadPDF('../pdfTest.pdf');
        };
    </script>

View Code

末尾上一下功能体现截图:

4858美高梅 16

 

设置好gulp之后在源代码使用npm安装模块:

创设利用:

npm install

$ node make generic

设置好模块后选取gulp营造地面web服务器:

不知晓在Windows七上该怎么用git、node(假使有了然的,可以告知自身下,在此谢过!),所以自身就改用linux举办创设(时期有广大苦涩历程,感觉都能够拍成都电讯工程高校影了!!!比如说笔者用git获取源码时,系统提醒笔者git没有设置,笔者用node时,提醒小编ShellJs没有安装,安装ShellJS,他告诉笔者要运用npm,意料之中,npm笔者也并未有安装…),其实,大家采用pdf.js,最终只须要创设后的始末,大家能够通过那里举办下载:

gulp server

——————————————分割线——————————————

功能如下:

免费下载地址在

跟着访问
http://localhost:8888/web/viewer.html
就能来看成效:

用户名与密码都以www.linuxidc.com

接下去使用gulp创设pdf.js,如下:

实际下载目录在 /2015年龄资历料/八月/三十日/pdf.js使用教程/

gulp generic

下载情势见
http://www.linuxidc.com/Linux/2013-07/87684.htm

创设完结后项目目录下生成build文件夹:

——————————————分割线——————————————

generic/web/viewer.html渲染pdf阅读器页面,而generic/web/viewer.js则是开辟内定的pdf文件,打开viewer.js

创设后的目录结构为:

能够看来,暗中认可打开的是generic/web/compressed.tracemonkey-pldi-0九.pdf文件,再来看下边那段代码:

有了营造后的build内容,大家就足以做3个不难的测试,把generic拷贝到汤姆cat的webapps中

这么,大家就足以动用传递file形参来动态内定打开的pdf文件,如:

4858美高梅 17

http://localhost:8080/generic/web/viewer.html?file=file.pdf

起步汤姆cat后,就足以经过:

  • 随之把品种并入到web项目中, 把generic作为插件使用,目录结构如下:

先写三个简易的jsp页面,使用iframe标签来加载pdf:

举办访问!能够看来贰个很帅气的界面:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<iframe src="<c:url value="/res/pdf/web/viewer.html" />?file=/displayPDF.do"
        width="100%" height="800"></iframe>

</body>
</html>

4858美高梅 18

随着写个controller读取pdf文件并回到:

generic/web/viewer.html重借使渲染pdf阅读器的体裁,而generic/web/viewer.js则是钦定打开的pdf文件(当然还有此外作用,可是那几个都不是我们关切的),大家看位于generic/web/viewer.js的一段代码:

import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;

/**
 * 在线预览pdf
 * @Auothor wzx
 * @Date 2016/12/18 0018
 */
@Controller
public class DisplayPDFController {

    @RequestMapping("/displayPDF.do")
    public void displayPDF(HttpServletResponse response) {
        try {
            File file = new File("F:/资料/pdf/JVM基础.pdf");
            FileInputStream fileInputStream = new FileInputStream(file);
            response.setHeader("Content-Disposition", "attachment;fileName=test.pdf");
            response.setContentType("multipart/form-data");
            OutputStream outputStream = response.getOutputStream();
            IOUtils.write(IOUtils.toByteArray(fileInputStream), outputStream);
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}

4858美高梅 19

运作,在浏览器访问以下地点:

大家得以看看,他暗许打开generic/web/compressed.tracemonkey-pldi-0九.pdf文件,再来看下边这段代码:

http://localhost:8080/res/pdf.jsp

4858美高梅 20

效能如下:

那就告知我们,能够由此传递file形参来动态钦点打开的pdf文件!如:

实质是访问generic/web/viewer.html,通过点名的file形参打开内定pdf文件。

下边笔者就介绍下,具体嵌入项目中是如何选拔的!

可以把generic中的内容作为第二方插件举行应用,在品种中能够像如下存放:

4858美高梅 21

接下来页面能够行使<iframe>标签来加载pdf

<iframe src=”<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html”
/>?file=<c:url value=”/publicity/displayPDF.do” />”
width=”100%” height=”800″></iframe>

效果图,如下:

4858美高梅 22

实为正是大家一向访问generic/web/viewer.html,然后为其内定二个file形参,用于钦赐打开的pdf文件!作者上边运用的流的方法开始展览点名的。

上边只是1种简易的接纳方式,上面介绍一种复杂点的使用方法:

不知道大家有未有试过上边那段url请求:

 大家在实际上利用中,大概会根据差别的参数,来抉择显示不相同的pdf文件,此时就提到到传参的难点了,仔细考查地点那段url地址会发觉,在file请求参数中的值为3个url地址,而以此url地址又增添了团结的央求参数,那就造成1个url地址中冒出二个”?”

致使浏览器不能够平常解析这段url!

一种缓解思路是:我们得以把file形参的值,先编码,然后再解码来解决这些难点!

此时,就能够请encodeUMuranoIComponent()函数出场了!因为其为js函数,所以需求在文书档案就绪函数中动态为iframe设置src的值,如下所示:

<%@ page contentType=”text/html;charset=GBK” language=”java” %>
<%@ taglib prefix=”c” uri=”” %>
<script type=”text/javascript”>
    $(function(){
        $(“#displayPdfIframe”).attr(“src”,'<c:url
value=”/resources/plugin/pdfJs/generic/web/viewer.html” />?file=’ +
encodeURIComponent(‘<c:url value=”/displayPDF.do?id=${id}”/>’));
    });
</script>
<div class=”ctrlDiv”>
    <div class=”eleContainer elePaddingBtm”>
        <iframe id=”displayPdfIframe” width=”100%”
height=”100%”></iframe>
    </div>
</div> 

既然有编码,那么就必然要有解码来分析他,然而这些工作generic/web/viewer.js已经替咱们做过了,如下所示:

4858美高梅 23

至此,pdf.js插件的牵线就告一段落了,第3次写博客,如有不到之处,希望我们可以不吝赐教,谢谢!

在此感激pdf.js的两位小编!(真心钦佩那一个异国民代表大相会,二私有能够写二个如此好的框架,而且依旧开源的!)。

本文永久更新链接地址:http://www.linuxidc.com/Linux/2015-06/118728.htm

4858美高梅 24

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有