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、embed和object (结果相同)
• 在Chrome站点设置中解锁不安全内容
• Acrobat中的打开和重新保存
• 使用在线PDF分析器查看是否存在任何问题(无发现)

Answer 1

与其使用浏览器本机PDF呈现程序，不如使用由Mozilla编写的JS。

ViewerJS提供了一个很好的接口，如果您想将它嵌入到一个页面中，那么您可以将它放在一个iframe中，并使用伊夫雷姆来控制它。

Answer 2

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

请参阅

从Base64字符串在JavaScript中创建BLOB

将Base64转换为Blob

Answer 3

我也有过同样的问题。我注意到一些超过1MB的PDF没有加载。

我在这里找到了一个解决方案：使用javascript打开base64编码的pdf文件。文件大小大于2MB的问题

需要将Base64字符串更改为BLOB。然后创建一个用于iframe的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、embed或object src中。这样，您仍然可以在页面中加载PDF，而无需在其他选项卡中打开它。