PDF.js 在 Firefox 中打开 pdf，但不能在 Chrome/Chromium 或扩展中打开答案

【问题标题】：PDF.js opens pdf in Firefox but not Chrome/Chromium or ExtensionPDF.js 在 Firefox 中打开 pdf，但不能在 Chrome/Chromium 或扩展中打开
【发布时间】：2014-06-15 17:45:15
【问题描述】：

我只是想运行一个简单的 pdf.js 测试来测试它的基本功能，并使用以下代码在 Firefox 中显示良好，但在我真正需要的任何 Chrome 浏览器或 Chrome 扩展程序中都没有（ Chrome 扩展程序）。我只是在本地抓取一个 pdf 以使用 PDF.js 显示。有什么建议吗？

<html>
<body>
  <div>
    <button id="prev" onclick="goPrevious()">Previous</button>
    <button id="next" onclick="goNext()">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>

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

  <!-- Use latest PDF.js build from Github -->
  <script type="text/javascript" src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>

  <script type="text/javascript">
    //
    // NOTE: 
    // Modifying the URL below to another server will likely *NOT* work. Because of browser
    // security restrictions, we have to use a file server with special headers
    // (CORS) - most servers don't support cross-origin browser requests.
    //
    var url = '/home/brent/Documents/pdfviewer/custodian-parent.pdf';

    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and currently do not allow cross-origin scripts)
    //
    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 1.0,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
        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
        };
        page.render(renderContext);
      });

      // Update page counters
      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    //
    // Go to previous page
    //
    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    //
    // Go to next page
    //
    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }

    //
    // Asynchronously download PDF as an ArrayBuffer
    //
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
  </script>  
</body>
</html>

此代码是从 PDF.js github 上的其中一个示例中获取的： [http://jsbin.com/pdfjs-prevnext-v2/6748/edit][1]

即使在他们的示例中，它也不能在 Chrome 中运行。

【问题讨论】：

Chrome 的 XHR 无法处理文件资源。在为使用 XMLHttpRequest 的 Chrome 开发 Web 应用程序时使用本地 Web 服务器。
您的意思是只创建一个 Web 服务器并在其上保存 pdf 文件？然后从 chrome 扩展中使用 XMLHttpRequest 抓取它？
PDF.js 和文件必须在同一个网络服务器上（见github.com/mozilla/pdf.js/wiki/…）
扩展程序对“file://”方案的访问权由用户控制的“允许访问文件 URL”复选框确定
谢谢。我试试看。

标签： javascript pdf google-chrome-extension

【解决方案1】：

Chrome 的 XHR 无法处理文件资源。当您为使用 XMLHttpRequest 的 Chrome 开发 Web 应用程序时，请使用本地 Web 服务器。由于 CORS，PDF.js 和文件必须位于同一 Web 服务器上。

此外，扩展程序对“file://”方案的访问权由用户控制的“允许访问文件 URL”复选框决定。

【讨论】：