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) ， 需要用到的可以查一下如何實現。