PDFJS使用

PDFJS是在线预览PDF的一款神器。 对于PC端浏览器，一般直接提供pdf文件，iframe一下就可以直接预览了。我使用这个插件的原因是在移动端，android微信无法在线预览。

（android微信搜了一下，原因是微信android使用x5的内核，就是QQ浏览器的那个，经过多次尝试，貌似它只要检测到文件流，就会直接下载，而不是打开到页面上）

先贴一个地址：http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples 这个是官方示例。

使用pdfjs在线预览pdf可以有两个选择：

1、使用pdfjs已经写好的viewer.html页面，例子：http://mozilla.github.io/pdf.js/web/viewer.html 做的功能比较全面。就是要部署pdfjs一堆的代码到服务器上。移动端也有直接预览的页面 https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer 这个没找到在线可运行的例子。

2、就是自己调用API做了，如果你的要求不多，实现起来也不难。

下面说下我的做法

场景：提供微信端在线pdf预览功能，框架使用Vue + pdfjs

step1:引用js文件

import PDFJS from 'pdfjs-dist'

step2:读取pdf文件

我在vue的beforeRouteEnter里加载pdf

var p = api.getPdfBase64Data(this.fileid) //后台读取pdf文件base64内容（下面说为什么是base64）
p.then(function(pdfData){
            PDFJS.getDocument({data:pdfData}).then(function getPdfHelloWorld(pdf) {
            t.totalPage = pdf.numPages;//总页数
            //我是一次加载了所有页，网上一些是一页页加载的，因为我的pdf页数不多
            for(var i = 1;i<=t.totalPage;i++) {
              pdf.getPage(i).then(function getPageHelloWorld(page) {
                var scale = 1;//缩放倍数，1表示原始大小
                var viewport = page.getViewport(scale);
                var canvas = document.getElementById('the-canvas' + page.pageNumber);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                page.render(renderContext).promise.then(function(){
                  t.loadedPageCount ++;//加载一个+1，最后总数和totalPage一样了，表示pdf加载完了
                });
              });
            }
          }).catch(function(e){
            alert('附件暂时无法移动端预览，请在PC端查看')
          });
})

step3:HTML

<canvas v-for="n in totalPage" :id="'the-canvas' + n" class="pdf-content"></canvas>

canvas是pdf显示的地方，一个canvas加载一页pdf，所以我按总页数生成了好几个canvas

 

为什么使用base64呢？

因为，在x5内核的微信里，就算使用ajax调用返回的是pdf文件，貌似也会走下载那一套，然后ajax接收不到文件流，因此就显示不了。 使用base64,就是一个完整的字符串，可以正常返回到ajax.

放大、缩小怎么办呢：

我的做法是重新调用一下上面的for循环的内容，重新画一遍。

其它的功能，如打印、导航栏，暂时没用到，还没做。 需要用到的可以研究下git上viewer.html的实现方式。

还有文本复制， pdfjs是在canvas上又盖了一个div，把文本显示在里面的各个小div里的，记得是pdfjs有一个API page.getTextContent().then(function(textContent) ， 需要用到的可以查一下如何实现。