使用pdf.js显示来自原始数据的PDF

Question

我刚刚开始使用pdf.js，尝试从原始pdf数据中加载pdf文件。我看到了这段代码：

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

我想知道是否有办法从原始的PDF数据中加载PDF，而不是从文件名加载。这种情况可能吗？

- Swiss

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);
      });
    });
  });
});

- Vel Genov

---

很好，接受这个答案，因为它似乎比我的原始答案更完整！ - Swiss

谢谢！如果有什么可以改进的地方，请告诉我。 - Vel Genov

@user94154，以上解决方案是否回答了您的问题？ - Vel Genov

pdfraw中的换行如何处理？JSON不支持实际换行，所以你会将它们转换为\n吗？ - Henrik O. Skogmo

Answer 2

嗯，既然没有其他人回答，那我就来分享我的发现。我发现可以从原始数据中加载pdf文件。这可以通过使用一个填充有数据的UInt8Array替换pdf文件存储位置的url来实现。

以下是实现此操作的示例代码：

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

}

- Swiss

---

这对我没有用。我收到了错误信息流必须具有数据。 - Mustafa

我也遇到了和 @MurWade 相同的错误。我非常希望能够解决这个问题。 - user94154