在 chrome 新版本上使用 window.open 显示 base64 pdf 数据答案

【问题标题】：Show base64 pdf data using window.open on chrome new version在 chrome 新版本上使用 window.open 显示 base64 pdf 数据
【发布时间】：2018-03-23 23:55:46
【问题描述】：

我正在使用以下代码在新窗口中以 pdf 格式打开 base64 数据

var pdf=response.data.base64;       
var doc = document.createElement("a");
doc.href ='data:application/octet-stream;base64,' + pdf;
doc.target = "blank";
doc.click();
$window.open('data:application/pdf;base64,' + pdf);

这适用于 chrome 版本 56.0.2924.87 但在 61.0.3163.100 版本中无法使用 [参考截图]
Sample plunker code

【问题讨论】：

标签： javascript angularjs google-chrome pdf

【解决方案1】：

var pdfResult = response.data.base64;
                    
let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(pdfResult) + "'></iframe>")

这用于在浏览器选项卡中显示 base64 pdf。

【讨论】：

请将您的答案翻译成英文
我认为上述答案中的 data_.data.info.result.result 令人困惑。对于尝试实施上述解决方案以在新选项卡中打开 base64 PDF 的人，只需将 data_.data.info.result.result 替换为如下：pdfResult = [您的 base64 PDF 字符串]

【解决方案2】：

我在使用 AngularJS 时遇到了类似的问题。这就是我的管理方式，在我的情况下，我从 URL 加载文件作为数组缓冲区。希望对您有所帮助。

$http({
    method: 'GET',
    url: '/api/transaction-file/'+id,
    responseType:'arraybuffer'
}).then(function(response){
    var file = new Blob([response.data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
}, function(response){
    //Error
});

【讨论】：

我更喜欢这个解决方案，因为它允许从 pdf 查看器下载 pdf 文件，而且它看起来更好，因为它打开了完整的窗口大小，其中 iframe 方法具有默认的正文填充。它可以很容易地适应使用 base64 字符串而不是 arrayBuffer。
我也喜欢这个解决方案，但是 URL 看起来有点难看blob:http://127.0.0.1:8080/afdc2815-85dd-4686-9be1-57763887dbeb
我得到一个空的 pdf 文件

【解决方案3】：

我也有问题，我和朋友 Petrus 的解决方案是：

const win = window.open("","_blank");
let html = '';

html += '<html>';
html += '<body style="margin:0!important">';
html += '<embed width="100%" height="100%" src="data:application/pdf;base64,'+base64+'" type="application/pdf" />';
html += '</body>';
html += '</html>';

setTimeout(() => {
  win.document.write(html);
}, 0);

【讨论】：