Открытие 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>')

Однако кажется, что при некотором размере вкладка зависает и продолжает загружаться. Я пробовал также с 5 МБ документов.

Есть ли лучший способ избежать этой проблемы.

Используемый браузер: Google Chrome 80.0.3987.122 или Firefox Выпуск расширенной поддержки (ESR)

Answer 1

Загрузите ваш pdf из блоба: URI, а не из data: URI.

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 Я также столкнулся с этой проблемой, когда писал этот ответ на очень похожий вопрос _{(который не имеет принятого ответа и не может использоваться в качестве целевой цели)} .