从Amazon S3中提取PDF，并直接在浏览器中从缓冲区/流中渲染

Question

我有一个要求，PDF不是保存在本地服务器上，而是私下存储在AmazonS3存储桶中。但在特定的请求下，我需要检索PDF并直接在用户的浏览器中呈现，而无需在web服务器上下载。

我能够在node.js拉流细，并与PDF数据作出回应。当我检查Chrome开发工具中的响应数据时，它看起来像PDF数据，我甚至可以阅读文档中的文本。

let params = {Bucket: process.env.S3STORAGE, Key: req.query.fileName};
res.attachment(req.query.fileName);
s3.getObject(params).createReadStream().pipe(res);

我尝试了多种方法来正确渲染它。它要么显示空白的PDF，要么显示gobbly-gook-gook PDF数据。

我使用一个vue2模板，并试图弹出PDF在引导模式。在这个尝试中，我得到一个空白的PDF：

<object :data="pdfStream" type="application/pdf" width="800px" :height="browserHeight"></object>


this.pdfStream = response.bodyText;

我看到一些答案说base64对其进行编码，但仍然无法实现。

// server side
let params = {Bucket: process.env.S3STORAGE, Key: req.query.fileName};
s3.getObject(params).createReadStream().pipe(strs('binary', 'base64')).pipe(res);

然后

//client side
 let objbuilder = '';
        objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,');
        objbuilder += (response.bodyText);
        objbuilder += ('" type="application/pdf" class="internal">');
        objbuilder += ('<embed src="data:application/pdf;base64,');
        objbuilder += (response.bodyText);
        objbuilder += ('" type="application/pdf"  />');
        objbuilder += ('</object>');
        this.pdfStream = objbuilder;

当然，我错过了一些简单的事情，或者犯了一个愚蠢的错误，但不确定是什么。我一直只是提供实际的文件，但在这个特定的例子中，目标是直接将数据呈现到浏览器中，而不生成位于S3存储中的PDF副本。

使现代化

杰森的回答为我指明了正确的方向，我相信我现在走在了正确的轨道上。然而，我不确定它是否会抛出错误。

我的第一次尝试是：

// returning a base64 encoded PDF from Amazon to the client
let params = {Bucket: process.env.S3STORAGE, Key: req.query.fileName};
s3.getObject(params).createReadStream().pipe(strs('binary', 'base64')).pipe(res);

然后在客户端Vue组件中：

//import PDFJS from 'pdfjs-dist';
export default {
  {components: PDFJS},
  ...
  ...

  ...
  viewDocument(fileName, documentName) {

      this.$http.get('/fetchDocument', {
        params: {
          fileName: fileName
        }
      })
      .then(response => {

         PDFJS.getDocument(response.bodyText).then(function (pdfDocument) {

          console.log('Number of pages: ' + pdfDocument.numPages);

        });
      });

    },

它回击了这个错误：

app.js:58668 GET http://192.168.3.14:3000/dist/app.worker.js net::ERR_ABORTED
app.js:55073 Warning: Setting up fake worker.
app.js:104 GET http://192.168.3.14:3000/0.js net::ERR_ABORTED
app.js:99 Uncaught (in promise) Error: Loading chunk 0 failed.
    at HTMLScriptElement.onScriptComplete (app.js:99)

没有应用程序。工人js或0。pdfjs dist库中的js。

然后如果我从没有base64的节点返回原始方式，它将返回原始PDF流，该流开始如下：

%PDF-1.2
%����
3 0 obj
<< 
/Lineariz

我得到了一个完全不同的错误

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL

最后，我在从节点返回的base64编码数据上尝试了base64Uint8Array函数，这导致了应用程序。工人js和0。我刚刚收到的JS404错误。

pdfjs dist包没有这些js文件，因此不确定到底发生了什么。

有什么想法吗？

Answer 1

您需要使用渲染器将PDF数据渲染到浏览器中。Mozilla的PDF就是这样一个项目。JS项目。由于您使用的是vue，因此可以查看以下示例了解其用法：https://github.com/shershen08/vue2-pdfjs-viewer

浏览器中已经内置了PDF阅读器，但不在JS应用程序的上下文中。这就是PDF的位置。JS项目出现了。