Как отобразить в формате base64 в формате PDF?

Я должен отобразить Base64 PDF в новой вкладке. Я использую код ниже

 var windo = window.open("", "");  
 var objbuilder = '';
 objbuilder += ('<embed width=\'100%\' height=\'100%\'  src="data:application/pdf;base64,');
 objbuilder += (fileData);
 objbuilder += ('" type="application/pdf" />');
 windo.document.write(objbuilder);

Он работает в FireFox и не работает в Chrome и IE. Я даже пытался с тегом, но тот же вывод, работая в FF, но не в Chrome и IE.

Я смотрю ниже JsFiddles, для которых работают в FF, но не в Chrome,

http://jsfiddle.net/yLx2W/

http://jsfiddle.net/yLx2W/1/

Моя версия Chrome: Версия 54.0.2840.99 м

FireFox версия: 49.0.2

Кто-нибудь есть идеи, пожалуйста, поделитесь.

Заранее спасибо

Источник

5 ответов

Решение

Он должен работать с Chrome, который вы можете использовать <iframe src="data:base64"..> или использовать <object data="data:base64..." ...>

У меня такая же проблема с IE. Невозможно отобразить PDF с base64 Мне пришлось генерировать временные файлы на сервере для отображения их с помощью IE, он отображал только существующие файлы.

Попробуйте использовать библиотеку JS для отображения вашего PDF как PDF.js,

Источник

Для тех, кто все еще не может сделать это, я нашел это в ответе другого, но я не помню, кто...

var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" 
data="data:application/pdf;base64,');
objbuilder += (myBase64string);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('<embed src="data:application/pdf;base64,');
objbuilder += (myBase64string);
objbuilder += ('" type="application/pdf"  />');
objbuilder += ('</object>');

var win = window.open("#","_blank");
var title = "my tab title";
win.document.write('<html><title>'+ title +'</title><body style="margin-top: 
0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;">');
win.document.write(objbuilder);
win.document.write('</body></html>');
layer = jQuery(win.document);

Таким образом, мы открываем PDF в новой вкладке.

Источник

Когда приведенный выше ответ не работает из-за ограничений размера, вы можете попробовать это решение, оно сработало для меня, когда я пытался преобразовать 16+ страниц PDF из Base64 обратно в PDF в Chrome.

Исправление состоит в том, чтобы преобразовать base64 обратно в двоичный, упаковать его в большой двоичный объект, а затем установить для iframe «src» значение Blob-URI, указывающее на этот большой двоичный объект.

      var base64 = ("yourBase64StringVariable")
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 } );
}

Исходный источник этого ответа - откройте файл PDF в кодировке base64 с помощью javascript. Проблема с размером файла более 2 МБ

Источник

Здесь '@Model.binaryDocument' - это данные base64

        $(document).ready(function () {
    var b64Data = "@Model.binaryDocument";
    var contentType = "application/pdf";
     const blob = b64toBlob(b64Data, contentType);
    const blobUrl = URL.createObjectURL(blob);

    window.location = blobUrl;
  })

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) 
       {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

Локально он должен работать с Chrome, вы можете использовать

      <iframe src="data:base64...">

<object data="data:base64...">

Но объект In server и iframe могут не работать, поэтому blob - лучшее решение для этого случая.

Источник 
function printPreview(data){
        var type = 'application/pdf';
        let blob = null;
        const blobURL = URL.createObjectURL( pdfBlobConversion(data, 'application/pdf'));
        const theWindow = window.open(blobURL);
        const theDoc = theWindow.document;
        const theScript = document.createElement('script');
        function injectThis() {
            window.print();
        }
        theScript.innerHTML = 'window.onload = ${injectThis.toString()};';
        theDoc.body.appendChild(theScript);
    }
  //converts base64 to blob type for windows
    function pdfBlobConversion(b64Data, contentType) {
          contentType = contentType || '';
          var sliceSize = 512;
          b64Data = b64Data.replace(/^[^,]+,/, '');
          b64Data = b64Data.replace(/\s/g, '');
          var byteCharacters = window.atob(b64Data);
          var byteArrays = [];

          for ( var offset = 0; offset < byteCharacters.length; offset = offset + sliceSize ) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
          }

          var blob = new Blob(byteArrays, { type: contentType });
          return blob;
        }

передайте данные base64 в эту функцию, и она покажет PDF-файл в новом окне. Это работает в Chrome и Firefox не в IE. Любая помощь, пожалуйста. Я хочу, чтобы это работало и в IE. Это дает ошибку, когда я даю bloburl окну.

Источник
Другие вопросы по тегам