从亚马逊S3中提取PDF并从缓冲区/流直接在浏览器中呈现
我有这样一个要求，即PDF不保存在本地服务器上，而是存储在Amazon桶上。但是根据特定的请求，我需要检索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副本。
更新
杰森的回答是指向正确的方向，我相信我现在在正确的轨道上。然而，这是抛出的错误，我不确定。
我的第一次尝试是：
// 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库中没有app.worker.js或0.js。
Then...if，我从节点返回原始的方式，没有base64，它返回原始的PDF流，启动如下：
%PDF-1.2
%����
3 0 obj
<<
/Lineariz我得到了一个完全不同的错误
Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL最后，我在节点返回的base64Uint8Array编码数据上尝试了来自这里的base64函数，这导致了刚才收到的app.worker.js和0.js 404错误。
pdfjs包没有那些js文件，所以不确定到底发生了什么。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2017-12-12 23:30:15
您需要使用渲染器将PDF数据呈现到浏览器中。其中一个项目是Mozilla的PDF.JS项目。由于您使用的是vue，所以可以查看下面的示例以了解使用情况：https://github.com/shershen08/vue2-pdfjs-viewer
浏览器中已经内置了PDF阅读器，但在JS应用程序的上下文中却没有。这就是PDF.JS项目出现的原因。
https://stackoverflow.com/questions/47782944
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号