将PDF从Amazon S3中拉出并从缓冲区/stream中直接在浏览器中呈现

我有一个要求，即PDF不保存在本地服务器上，而是私自存储在Amazon S3存储桶中。 但是，根据具体的请求，我需要检索PDF并直接在用户的浏览器中显示，而无需在Web服务器上下载。

我能够很好地在node.js中获取stream，并使用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，要么显示gook的PDF数据。

我正在使用vue2模板，并试图在引导模式下popupPDF。 在这个尝试中，我得到一个空白的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副本。

UPDATE

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

我的第一个尝试是这样的：

 // 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的原始方式，它返回原始的PDFstream，像这样开始：

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

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

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

最后，我从这里对从节点返回的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项目进入图片的地方。