使用pdf.js显示原始数据中的pdf [英] Using pdf.js to display pdf from raw data

问题描述

我刚开始使用pdf.js，并且尝试从原始pdf数据加载pdf文件.我已经看到了代码:

I am just getting started with pdf.js and I am trying to load a pdf file from the raw pdf data. I have seen the code:

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

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

But I am wondering if there is any way to load a pdf from the raw pdf data instead of from the filename. Is this possible?

推荐答案

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

I put together some complete code and was able to find the problem with the solution below:

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

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

When using this solution I ran into the problem other users have seen (@MurWade and @user94154) - the stream must have data error message. It looks like the problem is in the following line:

var int8View = new Uint8Array(...);

由于包含的数据格式不正确，因此无法正确创建包含数据的数组.因此，此行在某些情况下适用，但在一般情况下可能无效.

The array containing the data does not get properly created, since the data is not in the expected format. Therefore, this line works for some cases, but it might not work in the general case.

我已经提出了一个完整的解决方案，看来效果更好.它加载PDF文件，并将其转换为原始PDF流.此处仅出于测试目的，在实际示例中，PDF流可能会以其他方式接收.您可以在调试器中检查流，该流将显示为纯文本.下面是使此示例工作的代码的关键行.代替将原始PDF流转换为数组，而是将其转换为数据.

I've put together a complete solution, that seems to work better. It loads a PDF file, and it converts it to a raw PDF stream. This is there just for testing purposes, in a real world example, the PDF stream will probably be received in a different fashion. You can examine the stream in a debugger, and it will show as plain text. Below is the key line of the code to make this sample work. Instead converting the raw PDF stream to an array, convert it to data.

var docInitParams = { data: pdfraw };

然后继续加载数据.以下是有关如何加载标准原始PDF流并显示它的完整工作示例.我曾经以PDF JS hello世界示例作为起点.如果需要任何说明，请在评论中让我知道.

Then proceed with loading the data. Below is the complete working sample of how to load a standard raw PDF stream and display it. I used to PDF JS hello world sample as a starting point. Please let me know in the comments if any clarification is necessary on this.

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

这篇关于使用pdf.js显示原始数据中的pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！