pdf.js安裝步驟和使用

從github下載的源碼不能直接使用，最好使用命令行下載安裝

1、下載源碼

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

　　cd pdf.js

2、安裝node.js

     https://nodejs.org/en/download/

3、安裝gulp

 sudo npm install -g gulp-cli

4、安裝pdf.js的依賴庫

　 sudo npm install

5、啟動本地web服務，因為有的瀏覽器不允許用file://協議打開pdf文件

    sudo gulp server

6、構建PDF.js

　sudo gulp generic

　　這將在build / generic / build /目錄中生成pdf.js和pdf.worker.js。 這兩個腳本都是必需的，但是只有pdf.js需要被包含，因為pdf.worker.js將由pdf.js加載。 PDF.js文件很大，應該細化生產。

也可下載我的構建版本 鏈接:https://pan.baidu.com/s/1o7AjqaA

7、在項目中引入入構建后的pdf.js

　　

<script type="text/javascript" src="generic/build/pdf.js"></script>

...

<canvas id="canvas"></canvas>

$(function(){
           var url = '../compressed.tracemonkey-pldi-09.pdf';
           PDFJS.workerSrc = 'generic/build/pdf.worker.js';
           PDFJS.getDocument(url).then(function getPdf(pdf) {
                   pdf.getPage(2).then(function getPage(page) {
                               var scale = 1;
                               var viewport = page.getViewport(scale);
                               var canvas = document.getElementById('canvas');
                               var context = canvas.getContext('2d');
                               canvas.height = viewport.height;
                               canvas.width = viewport.width;
                               var renderContext = {
                                   canvasContext: context,
                                       viewport: viewport
                              };
                          page.render(renderContext);
                        });
        });
});

 

8、使用viewer.html加載pdf 

http://localhost:6443/web/PDFDemo/pdfjs/generic/web/viewer.html?file=../../../swift.pdf

在viewer.html后面跟着file=xxx.pdf,可以直接用viewer.html渲染pdf,這種方式附帶pdf工具欄