首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >从亚马逊S3中提取PDF并从缓冲区/流直接在浏览器中呈现

从亚马逊S3中提取PDF并从缓冲区/流直接在浏览器中呈现
EN

Stack Overflow用户
提问于 2017-12-12 22:58:44
回答 1查看 5.8K关注 0票数 6

我有这样一个要求,即PDF不保存在本地服务器上,而是存储在Amazon桶上。但是根据特定的请求,我需要检索PDF并直接在用户的浏览器中呈现它,而不需要在web服务器上下载它。

我能够在node.js中很好地拉出流,并使用PDF数据进行响应。当我检查Chrome工具中的响应数据时,它看起来像PDF数据,甚至可以读取文档中的文本。

代码语言:javascript
复制
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:

代码语言:javascript
复制
<object :data="pdfStream" type="application/pdf" width="800px" :height="browserHeight"></object>


this.pdfStream = response.bodyText;

我看到了一些答案,上面说base64对它进行了编码,但仍然不能让它起作用。

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

然后

代码语言:javascript
复制
//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副本。

更新

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

我的第一次尝试是:

代码语言:javascript
复制
// 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组件中:

代码语言:javascript
复制
//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);

        });
      });

    },

它回击这个错误:

代码语言:javascript
复制
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.js0.js

Then...if,我从节点返回原始的方式,没有base64,它返回原始的PDF流,启动如下:

代码语言:javascript
复制
%PDF-1.2
%����
3 0 obj
<< 
/Lineariz

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

代码语言:javascript
复制
Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL

最后,我在节点返回的base64Uint8Array编码数据上尝试了来自这里的base64函数,这导致了刚才收到的app.worker.js和0.js 404错误。

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

有什么想法吗?

EN

Stack Overflow用户

回答已采纳

发布于 2017-12-12 23:30:15

您需要使用渲染器将PDF数据呈现到浏览器中。其中一个项目是Mozilla的PDF.JS项目。由于您使用的是vue,所以可以查看下面的示例以了解使用情况:https://github.com/shershen08/vue2-pdfjs-viewer

浏览器中已经内置了PDF阅读器,但在JS应用程序的上下文中却没有。这就是PDF.JS项目出现的原因。

票数 4
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47782944

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档