Base64 嵌入的 PDF 文件不会在 Chrome 中呈现

Question

某些 PDF 文件无法在 Chrome 浏览器中呈现，但在 Firefox 中可以正常呈现。如果直接嵌入，所有文件都可以在所有浏览器中正常呈现。<object id="content-view" :data="content_view.base64" type="application/pdf"></object>令人困惑的部分是，问题仅针对某些文件，而不是全部。文件存储在非公开的文件夹中，这就是为什么它们以 Base64 形式供用户查看。我使用在线 Base64 解码器测试了有问题的文件，得到了相同的结果。在 FF 中渲染，不在 Chrome 中渲染。我无法共享任何 PDF 文件。它们均来自同一来源，从同一设备扫描，PDF 版本 1.4，4 页。我努力了：使用 iframe、嵌入和对象（相同的结果）取消阻止Chrome 网站设置中的不安全内容在 Adobe Acrobat 中打开并重新保存使用在线PDF分析器查看是否存在任何问题（未发现）

Answer 1

我有完全相同的问题。我注意到一些超过 1MB 的 PDF 无法加载。

需要将 Base64 字符串更改为 BLOB。然后创建一个用于 iframe src 的 URL。

这是代码：

base64PDFToBlobUrl( base64 ) {

  const binStr = atob( base64 );

  const len = binStr.length;

  const arr = new Uint8Array(len);

  for (let i = 0; i < len; i++) {

    arr[ i ] = binStr.charCodeAt( i );

  }

  const blob =  new Blob( [ arr ], { type: 'application/pdf' } );

  const url = URL.createObjectURL( blob );

  return url;

}

这将返回一个 url，您可以将其放入 iframe、嵌入或对象 src 中。这样，您仍然可以在页面中加载 PDF，而无需在其他选项卡中打开它。

Answer 2

不要在 HTML 对象元素中打开 PDF 文件，而是使用 Blob URL 在新窗口中打开它。

将 Base64 转换为 Blob

Answer 3

您可以使用 Mozilla 编写的 JS 渲染器，而不是使用浏览器原生的 PDF 渲染器。

ViewerJS为此提供了一个很好的界面，如果您想将其全尺寸嵌入到页面中，那么您可以将其放置在 iframe 中并使用iFrame-resizer进行控制。