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>

 

效果圖如下所示：