javascript - 从 Amazon S3 中提取 PDF 并直接在浏览器中从缓冲区/流中呈现

Question

我有一个要求，PDF 不保存在本地服务器上，而是私密地存储在 Amazon S3 存储桶中。但是根据特定请求，我需要检索 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 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 副本。

更新

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

我的第一次尝试是这样的:

// 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)

pdfjs-dist 库中没有app.worker.js 或0.js。

然后...如果我从没有 base64 的原始方式从 Node 返回，它返回原始 PDF 流，开始如下:

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

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

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

最后，我尝试了 here 中的 base64Uint8Array 函数从 Node 返回的 base64 编码数据，导致我刚刚收到的 app.worker.js 和 0.js 404 错误。

pdfjs-dist 包没有那些 js 文件，所以不确定到底发生了什么。

有什么想法吗？

Answer 1

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

浏览器已经内置了 PDF 阅读器，但不是在 JS 应用程序的上下文中。这就是 PDF.JS 项目发挥作用的地方。