pdf.js可以实现在html下直接浏览pdf文档

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

 

pdf.js可通过pdf文件的地址或pdf数据流获取pdf，具体实现是调用接口函数 PDFJs.getDocument(url/buffer)将pdf载入html，通过canvas处理, 然后渲染pdf文件。将pdf转换成数据流，因为转换成流的话可以解决pdf.js的跨域问题。

用ajax调用后台方法查询pdf的url地址，然后传递给另一个页面去调后台方法进行Base64编码。

//转换成二进制编码
byte[] data = HttpUrlConnectionUtil.doGet(pdfUrl, null, 60000);
//转换成base64二进制字符串
String encodeBase64 = Base64.encodeBase64String(data);
this.setEncodeBase64(encodeBase64);
return "detail";

后台是发pdf的数据流给前台，前台接收pdf的buffer,然后通过pdf.js来渲染。

js代码

 function showPdf() {

            var container = document.getElementById("container");

            container.style.display = "block";

            var url = convertDataURIToBinary('${encodeBase64}');//encodeBase64是后台传递的Base64编码的二进制字符串

 

            PDFJS.workerSrc = 'js/pdf.worker.js';

            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {

               var $pop = $('#pop');

                var shownPageCount = pdf.numPages                

 var getPageAndRender = function (pageNumber) {

                pdf.getPage(pageNumber).then(function getPageHelloWorld(page) {

                         var scale = 2;

                         var viewport = page.getViewport(scale);

                         var $canvas = $('<canvas></canvas>').attr({

                             'height': viewport.height,

                             'width': viewport.width

                         });

                         $pop.append($canvas);

                         

                         page.render({//设置渲染方式

                            canvasContext: $canvas[0].getContext('2d'),//二维绘图环境

                             viewport: viewport

                         });

                     });

                  if (pageNumber < shownPageCount) {

                         pageNumber++;

                         getPageAndRender(pageNumber);

                     }  

                };

                getPageAndRender(1);            

            });

            

        }

  function convertDataURIToBinary(dataURI) { //将encodeBase64解码

            var raw = window.atob(dataURI);// 进行解码

            var rawLength = raw.length;

            //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068

            var array = new Uint8Array(new ArrayBuffer(rawLength));  

            for(i = 0; i < rawLength; i++) {

              array[i] = raw.charCodeAt(i); //charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。

            }

            return array;

         }

 

 

  <div id="container" style="display:none;">

        <div id="pop" class="pop">

        </div>

</div>

 

电子签章不显示问题：

在pdf.worker.js文件中找到如下图所示的代码段

 

将this.setFlags(AnnotationFlag.HIDDEN);注释掉就会显示电子签章，反之不显示