在新选项卡中打开 base64 pdf 会冻结某个文件大小的选项卡答案

【问题标题】：Opening base64 pdf in a new tab freezes tab over some file size在新选项卡中打开 base64 pdf 会冻结某个文件大小的选项卡
【发布时间】：2020-02-26 11:38:43
【问题描述】：

我们正在使用这种方法在另一个选项卡中打开 PDF 文档的内容

  var win = window.open();
  win.document.write('<iframe src="data:application/pdf;' + someDoc.url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')

但是，标签页似乎超过了一定尺寸后会冻结并保持在继续加载状态。我也尝试过使用 5MB 的文档。

有没有更好的方法来避免这个问题。

使用的浏览器：Google Chrome 80.0.3987.122 或 Firefox 扩展支持版本 (ESR)

【问题讨论】：

一些浏览器只支持最大大小限制的数据 URL，可能是 2 MB。
@mkl 此限制仅适用于地址栏 url，您可以很好地从 dataURI 加载更大的文件：jsfiddle.net/nbfdakor

标签： javascript pdf iframe

【解决方案1】：

从 blob:URI 而不是从 data:URI 加载您的 pdf。

var win = window.open();
var blob = base64ToBlob(someDoc.url, 'application/pdf');
win.document.write('<iframe src="' + URL.createObjectURL( blob ) + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></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 } );
}

live plnkr

Chrome 的插件和 Firefox 的 pdf.js 中存在错误，我在写this answer 就一个非常相关的问题 _{（没有公认的答案和不能用作欺骗目标）}.

【讨论】：