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

Question

我正在使用下面的代码使用 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>");

Answer 1

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

请注意，这个限制不是由这些插件/脚本（pdf.js 甚至只是使选项卡崩溃）之外的任何其他内容决定的，浏览器在许多地方确实支持更大的 dataURL，例如 <img>、<video>、<iframe> 等。

您可以在此处查看实时重现， 但请注意，如果您使用的是 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 } );
}

再次作为外包 plnkr进行现场演示。

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

Answer 2

大多数流行浏览器的 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 个字符，这将dataURL 的长度限制为 65529 个字符（如果您使用 plain 而不指定 MIME 类型，则 65529 个字符是编码数据的长度，而不是源的长度data:）。

也可以看看

• https://en.wikipedia.org/wiki/Data_URI_scheme#Syntax
• /sf/answers/29202911/