从 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，要么显示令人眼花缭乱的 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的原始方式，它返回原始PDF流，开头如下：

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

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

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

最后，我在node 返回的 base64 编码数据上尝试了base64Uint8Array从这里开始的函数，这导致了我刚刚收到的 app.worker.js 和 0.js 404 错误。

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

有什么想法吗？

Answer 1

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

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