javascript - 在新选项卡中打开 base64 pdf 会卡住某些文件大小的选项卡

Question

我们正在使用这种方法在另一个选项卡中打开 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)

Answer 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都有bug，我在写this answer时也遇到过这个问题关于一个非常相关的问题_{(没有公认的答案，不能用作欺骗目标)}。