如何使用pdf.js呈現pdf文件？

Question

我創建了一個html文件，內容如下index.html

<html>
  <head>
    <script type="text/javascript" src="./pdf.js"></script>
    <script type="text/javascript" src="./hello.js"></script>
  </head>
  <body>
    <canvas id="the-canvas" style="border:1px solid black;"/>
  </body>
</html>

hello.js的內容

PDFJS.disableWorker = true;
var pf = PDFJS.getDocument('./helloworld.pdf')
pf.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(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);
  });
});

但是當我將瀏覽器指向index.html時，pdf沒有正確顯示。 我希望用戶能夠在他的計算機上選擇一個pdf文件，並在瀏覽器窗口中顯示該pdf文件。

Answer 1

在使用file: protocol而不是http:或https:時，您似乎遇到了這個問題。 不同協議之間存在不同的安全考慮因素。

這是一篇關於將XMLHttpRequest與本地文件一起使用的博客文章，以及關於Mozilla Firefox票證的討論。

項目上有一些可能提供指針的票（包括這一票和這一票）。 這張票的評論說：

典型的pdf.js用例需要使用Web服務器和現代HTML5瀏覽器。

我建議您修復您的問題 ，只需通過Web服務器運行即可使用http協議。 Nginx和Apache易於安裝和設置。

如果不起作用，如果上述步驟不起作用，則使用此方法為您的系統生成pdf.js和pdf.worker.js。

如何使用pdf.js呈現pdf文件？

問題描述

1 個解決方案

解決方案1
4 已采納 2014-03-26 14:14:08

如何使用pdf.js呈現pdf文件？

問題描述

1 個解決方案

解決方案1 4 已采納 2014-03-26 14:14:08

解決方案1
4 已采納 2014-03-26 14:14:08