javascript - 使用 pdf.js 从原始数据显示 pdf

Question

我刚刚开始使用 pdf.js，我正在尝试从原始 pdf 数据加载 pdf 文件。我看过代码:

PDFJS.getPdf('cwpdf.pdf', function getPdfHelloWorld(data) { 
   ...
}

但我想知道是否有任何方法可以从原始 pdf 数据而不是从文件名加载 pdf。这可能吗？

Answer 1

我整理了一些完整的代码，并找到了以下解决方案的问题:

var int8View = new Uint8Array(...); //populate int8View with the raw pdf data
PDFJS.getDocument(int8View).then(function(pdf) {
}

使用此解决方案时，我遇到了其他用户(@MurWade 和@user94154)看到的问题 - stream must have data 错误消息。看起来问题出在以下行中:

var int8View = new Uint8Array(...);

包含数据的数组没有正确创建，因为数据不是预期的格式。因此，这条线适用于某些情况，但它可能不适用于一般情况。

我整理了一个完整的解决方案，似乎效果更好。它加载一个 PDF 文件，并将其转换为原始 PDF 流。这只是为了测试目的，在现实世界的例子中，PDF 流可能会以不同的方式接收。您可以在调试器中检查流，它将显示为纯文本。下面是使这个示例工作的代码的关键行。而是将原始 PDF 流转换为数组，而是将其转换为数据。

var docInitParams = { data: pdfraw };

然后继续加载数据。下面是如何加载标准原始 PDF 流并显示它的完整工作示例。我曾经以 PDF JS hello world 示例作为起点。如果需要对此进行任何说明，请在评论中告诉我。

'use strict';

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {


  pdf.getData().then(function(arrayBuffer) {
    var pdfraw = String.fromCharCode.apply(null, arrayBuffer);

    var docInitParams = {
      data: pdfraw
    };
    PDFJS.getDocument(docInitParams).then(function(pdfFromRaw) {
      pdfFromRaw.getPage(1).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  });
});