pdf.js使用总结#如何在网页读取并显示PDF格式文档

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

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

我发现pdf.js就是把pdf以图片形式展示在页面上的。 

所以在使用之前需要导入这两个jar包，具体使用最好查看Github上的开源项目（https://github.com/mozilla/pdf.js），上面的文档也很详细，在examples文件夹下有示例可以参照。

在我们的项目中，经过测试发现可能由于生成PDF文件工具的不同，所以PDF文档的宽度也可能会有所不同，所以在项目中需要能自适应文件文档宽度，按比例缩放显示。

实现代码如下：

<script type="text/javascript">
            var pdfName="<%=parturl%>";
            var curWwwPath = window.document.location.href;
            var pathName = window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            //获取主机地址，如： http://localhost:8083
            var localhostPath = curWwwPath.substring(0, pos);
            //获取带"/"的项目名，如：/uimcardprj
            var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
               /*  var url=localhostPath + projectName+'/WEB-INF/adminUpload/pdfFile/'+pdfName; */
               var url=localhostPath + projectName+'/fileUpload/adminFile/'+pdfName;
            var pdfDoc = null,
                    pageNum = 1,
                    pageRendering = false,
                    pageNumPending = null,
                    scale = 1.5;//定义缩放比
            /**
             * Get page info from document, resize canvas accordingly, and render page.
             * @param num Page number.
             */
            function renderPage(num) {
                pageRendering = true;
                // Using promise to fetch the page
                pdfDoc.getPage(num).then(function(page) {
                    var canvasList = document.getElementById('canvas_list');
                    var canvas = document.createElement('canvas');
                    canvasList.appendChild(canvas);
                    var ctx = canvas.getContext('2d');
                    var viewport = page.getViewport(scale);
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    // Render PDF page into canvas context
                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);
                    // Wait for rendering to finish
                    renderTask.promise.then(function() {
                        pageRendering = false;
                        if (pageNumPending !== null) {
                            // New page rendering is pending
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                    });
                });
            }
            /**
             * If another page rendering in progress, waits until the rendering is
             * finised. Otherwise, executes rendering immediately.
             */
            function queueRenderPage(num) {
                if (pageRendering) {
                    pageNumPending = num;
                } else {
                    renderPage(num);
                }
            }
            /**
             * Asynchronously downloads PDF.
             */
            PDFJS.getDocument(url).then(function(pdfDoc_) {
                pdfDoc = pdfDoc_;
                   pdfDoc.getPage(1).then(function(page) {
                    var viewport = page.getViewport(scale);
                    //根据PDF宽度大小设置自适应缩放比
                    var temp = 3674.7-viewport.width;
                    if(temp>0){
                        scale=Math.abs(3674.7-viewport.width)/1854.5;
                    }else{
                        scale=Math.abs(6587-viewport.width)/7894.7;
                    }
                    //alert(scale+","+viewport.width);
                });
                 for(var i = 1 ; i <= pdfDoc.numPages; i++) {
                     queueRenderPage(i);
                } 
            });
    </script>

代码中的scale 变量是定义缩放比，默认是1.5倍显示，定义viewport ：

viewport = page.getViewport(scale);

此时viewport.width用来判断在1.5倍缩放后PDF的宽度（以px为单位），大部分在这个比例下宽度大约为900px，显示正常，但是也有特别大的，测试过程中发现最大（宽）的一个PDF在1.5倍缩放下宽度约为3900px，此时在页面上只能显示部分，于是调缩放比为0.32的时候显示正常，大约为900px，根据这个关系，我列了一个二元一次方程组，试图根据pdf在1.5倍缩放下的宽度（px），求出一个合理的缩放比（scale），使PDF的宽度都以900px显示。因为测量的不准确，求出的参数差距很大，在最后不得已采用两组参数混合使用，才起到了对PDF很好的兼容。

由于所有的PDF文档是上传到服务器上而不是本地，所以上面的代码中有一部分是为了获取到PDF文件的地址。可以对比官方示例进行学习。

官方helloworld.html代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
</head>
<body>

<h1>'Hello, world!' example</h1>

<canvas id="the-canvas" style="border:1px  solid black"></canvas>

<script src="pdf.js"></script>

<script id="script">
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var url = './helloworld.pdf';

  //
  // The workerSrc property shall be specified.
  //
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    'pdf.worker.js';

  //
  // Asynchronous download PDF
  //
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale, });

      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>

<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
      document.getElementById('script').text;
</script>
</body>
</html>

效果图如下所示：