如何显示base64编码的pdf？

Question

我必须在新标签页中显示 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 m

FireFox 版本：49.0.2

有没有人有什么想法，请分享。

提前致谢

Answer 1

它应该适用于 Chrome 你可以使用

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

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

我在使用 IE 时遇到了同样的问题：不可能 显示带有 base64 字符串的 pdf。

我必须在服务器上生成临时文件才能用 IE 显示它们，他只使用路径 显示现有文件。

您仍然可以使用 JS 库 来显示您的 pdf，如 PDF.js。

Answer 2

对于那些仍然做不到的人，我在其他人的回答中找到了这个，但我不记得是谁...

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。

Answer 3

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 数据传递给此函数，它将在新 window 中显示 pdf。这在 chrome 和 Firefox 中有效，在 IE 中无效。任何帮助请。我希望它也能在 IE 中工作。它在我将 bloburl 提供给 window.

时出现错误

Answer 4

这里'@Model.binaryDocument'是base64数据

1)按型号

<object>
   <embed id="pdfID" type="text/html" width="1200" height="600" src="data:application/pdf;base64,@Model.binaryDocument" />
</object>

2)通过js

  $(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;
}

✔ 第一个解决方案更适合防止自动下载 pdf。

Answer 5

当上述答案因大小限制而不起作用时，您可以尝试此解决方案，当我尝试将 16 页以上的 PDF 从 Base64 转换回 Chrome 中的 PDF 时，它对我有用。

修复方法是将 base64 转换回二进制，将其打包到 Blob 中，然后将 iframe 的“src”设置为指向该 blob 的 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 } );
}

此答案的原始来源 - Open base64 encoded pdf file using javascript. Issue with file size larger than 2 MB

如何显示base64编码的pdf？

how to display base64 encoded pdf?

html

javascript

embed

pdf

base64