使用 javascript 打开 base64 编码的 pdf 文件。文件大小大于 2 MB 的问题答案

【问题标题】：Open base64 encoded pdf file using javascript. Issue with file size larger than 2 MB使用 javascript 打开 base64 编码的 pdf 文件。文件大小大于 2 MB 的问题
【发布时间】：2020-02-17 16:02:09
【问题描述】：

我正在使用以下代码使用 javascript 打开 base64 编码的 pdf 文件。它适用于 1MB 以下的小型 pdf 文件。但如果文件大小大于 2MB，它就不起作用。如果您有类似场景的工作代码，请告诉我。

var base64 = "base64 content";
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + base64 + "'></iframe>");

【问题讨论】：

为什么首先将 PDF 编码为 base64？
欢迎来到 SO。 “它不起作用”不是对这里发生的事情的一个很好的描述为什么你不告诉我们到底发生了什么？
一个 2MB 的字符串会有点笨拙，但是你把它删掉了吗？该 base64 字符串实际上来自哪里？是否可以将数据保留为二进制格式？
我们通过webservice以字符串格式从不同系统获取base64编码的pdf文件。现在，在我们的系统中，我们需要将其转换回 pdf 并在浏览器/acrobat 中打开它。如果 pdf 文件的大小小于 1MB，我在这里提到的代码运行良好，在此之上它会打开一个没有任何内容的空白窗口。如果大小超过 1MB，Javascrip 是否有任何限制打开 base64 编码的 pdf 文件？

标签： javascript

【解决方案1】：

大多数流行浏览器的 URL 限制通常为 65,535 个字符（~64 KB），因此这是对 URL 中字符数的限制。您通常希望此数字低于 2,000 (2 KB)，以便您的网站可以在大多数浏览器上运行（某些情况下是旧版浏览器）。

见：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

长度限制

尽管 Firefox 支持基本上无限长度的data URL，但浏览器不需要支持任何特定的最大长度 data。例如，Opera 11 浏览器将 URL 限制为 65535 个字符，这将 data URL 限制为 65529 个字符（65529 个字符是编码数据的长度，而不是源，如果您使用纯 data:，而不指定 MIME类型）。

另见

【讨论】：

我们通过webservice以字符串格式（没有URL，整个文件）从不同的系统获取base64编码的pdf文件。现在，在我们的系统中，我们需要将其转换回 pdf 并在浏览器/acrobat 中打开它。如果 pdf 文件的大小小于 1MB，我在这里提到的代码运行良好，在此之上它会打开一个没有任何内容的空白窗口。如果大小超过 1MB，Javascrip 是否有任何限制打开 base64 编码的 pdf 文件？
@RabiCRM，我相信你误会了。 Polywhirl 先生的意思是，您可以在浏览器 URL 中设置的字符数量是有限制的。设置 iframe src 与设置 URL 相同。这就是为什么您的方法因大文件而失败的原因。较大的文件意味着您的 base64 字符串中有更多字符。因此，当您的 base64 字符串大于 65,535 个字符时，浏览器将无法解析 url（或您的情况下的 iframe src）。

【解决方案2】：

您可以尝试将文件读取/存储为 Blob，然后使用 saveAs from FileSaver.js 下载或打开 pdf 文件

【讨论】：

【解决方案3】：

对于由 data-URI 加载的 pdf 文档的大小，Chrome 的 pdf 阅读器插件和 Mozilla 的 pdf.js（由 Firefox 使用）似乎确实存在限制。

请注意，除了这些插件/脚本（pdf.js 甚至只是使选项卡崩溃）之外，此限制不受其他任何限制，浏览器在许多地方确实支持更大的 dataURL，例如、

You can see a live repro here 但请注意，如果您使用的是 Firefox，它可能会导致您的浏览器崩溃，因此请自行承担切换复选框的风险。 _{（外包是因为 Chrome 无法从 StackSnippet 的 null 来源 iframe 加载 pdf）。}

要解决此问题，请将 base64 数据转换回二进制文件，打包在 Blob 中，然后将 iframe 的 src 设置为指向该 Blob 的 blob-URI：

const blob = base64ToBlob( base64, 'application/pdf' );
const url = URL.createObjectURL( blob );
const pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='" + url + "'></iframe>");

function base64ToBlob( base64, type = "application/octet-stream" ) {
  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 );
  }
  return new Blob( [ arr ], { type: type } );
}

Once again Live Demo as an outsourced plnkr.

但请注意，如果您的 API 直接将该 pdf 作为 Blob 发送，或者即使您可以让您的直接指向资源的 URL，效率会更高。

【讨论】：