如何使用 JavaScript 显示从 S3 获取的 PDF？

Question

我需要从 s3.amazonaws.com 获取一个 PDF 文件，当我使用 Postman 查询它（或直接粘贴到浏览器中）时，它可以正常加载。但是，当我尝试为其生成文件路径（稍后传递给查看器）时，它不起作用：

fetch(<S3URL>).then(res => res.blob()).then(blob => {

    // THIS STEP DOES NOT WORK
    let myBlob = new Blob(blob, {type: 'application/pdf'});

    // expect something like 'www.mysite.com/my-file.pdf'
    let PDFLink = window.URL.createObjectURL(myBlob);
        
    return PDFLink;        
}

我使用的是 Autodesk 的 Forge PDF 查看器，它非常适合本地 PDF 文件：

let myPDFLink = 'public/my-file.pdf';

Autodesk.Viewing.Initializer(options, () => {
  viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
  viewer.start();
 
  viewer.loadExtension('Autodesk.PDF').then( () => {
        viewer.loadModel(myPDFLink, viewer); // <-- works fine here        
  });
});

// from https://github.com/wallabyway/offline-pdf-markup

那么，我如何从 S3 URL（例如 s3.amazonaws.com/com.autodesk.oss-persistent/0d/ff/c4/2dfd1860d1...）转到 PDF 查看器可以理解的内容（即在 URL 中具有 .pdf 扩展名） )?

我知道对于 JSON 文件我需要执行 res.json() 来提取 JSON 内容，但是对于 PDF，我应该如何处理 res 对象？

注意：我无法控制 S3 URL。每当我想从他们的 BIM360 门户下载文档时，Autodesk 都会生成一个临时 S3 link。

Answer 1

我尝试了很多选项，我可以显示通过 API 调用获取的 PDF 的唯一方法是使用对象元素：

<object data='<PDF link>' type='application/pdf'>

无法将下载的 blob 转换为 base64。将 PDF link 放在 iframe 中也不起作用（它仍然下载而不是显示）。如果 PDF 是前端应用程序的一部分（即本地文件，而不是从远程服务器获取的文件），我读过的所有选项仅适用。

如何使用 JavaScript 显示从 S3 获取的 PDF？

How to display PDFs fetched from S3 using JavaScript?

javascript

pdf-generation

autodesk-viewer

autodesk-forge