Google Chrome - iFrame 中的 PDF 下载不起作用答案

【问题标题】：Google Chrome - PDF Download in an iFrame not workingGoogle Chrome - iFrame 中的 PDF 下载不起作用
【发布时间】：2018-02-07 09:15:09
【问题描述】：

因此，由于最近的 Chrome 更新阻止了使用 javaScript 直接打开数据 URL：“不允许将顶部框架导航到数据 URL”，我有一些代码需要修改。我有一个使用 mPDF 生成 PDF 的 ajax 调用，将其发送回 base 64 - 并且应该在新选项卡中打开。这总是有效的。但是由于这个问题，我现在要做的是将该 PDF 加载到新窗口中的 iFrame 中以避免错误。这行得通，这就是我所拥有的：

$('.print-order-pdf').click(function(){

    var orderNumber = $(this).attr('order')
    var data = {
        pdfnonce: pdfAjax.pdfnonce,  
        action: 'getOrderPDF',
        orderNumber: orderNumber,
    }
    var win = window.open('', '_blank');
    $.post(pdfAjax.ajax_url, data, function(return_url){           
        win.document.write("<iframe id='pdf' src='"+ return_url +"'></iframe>");
        win.document.write("<style> html, body{ overflow:hidden; margin:0; } #pdf{ width:100%; height: 100%; }</style>");
    });

});

（这是一个 wordPress Ajax 调用）。无论如何 - 一切正常，带有 PDF 的新页面打开。问题是 - 在 Chrome 中，作为 PDF 控件的一部分出现的下载链接不再有效。我可以打印、旋转等等——但不能下载文件。我在firefox中测试过，在那里触发下载没有问题。 PDF 窗口的 Chrome 控制台根本没有显示任何错误。有任何想法吗？ Chrome 中是否有特定的东西阻止从 iFrame 内部下载？为什么？有办法解决吗？

非常感谢。

【问题讨论】：

我无法重现这个（60 stable 和 62 canary, mac）。
嗯...好吧，有趣-我也在使用 60 stable 并且有其他人在这里尝试-他们看到了同样的问题。所以我触发此选项卡的方式一定有问题 - 但我不知道是什么。附件是检查员的截图。控制台中什么都没有，这就是嵌入和下载图标的样子。这里有事吗？ screencast.com/t/WlqHqJTJ50K
你找到解决办法了吗？

标签： javascript google-chrome pdf iframe download

【解决方案1】：

我的情况就是这样！我正在使用 chrome 版本61.0.3163.100。我猜这是浏览器的一些缺陷，但我在谷歌的论坛上没有找到任何东西。我怀疑是否直接下载文件，但不想放弃 chrome PDF 查看器。

在我得到明确答案之前，我暂时找到了一个丑陋且不雅的解决方案。我在生成的窗口中创建了一个链接：

var newWindow = window.open("", "PDF", 'dependent=yes,locationbar=no,scrollbars=no,menubar=no,resizable,screenX=50,screenY=50,width=850,height=800');
newWindow.document.write(
'<html><body><center>' +
'<a title="Download File" style="font-family: \'Verdana\';color: #333;text-decoration: none;font-weight: 600;" download="File.PDF" href="data:application/pdf;base64,' + base64 + '">Download File</a>' +
'</center><br>' +
'<object width=100% height=100% type="application/pdf" data="data:application/pdf;base64,' + base64  + '">' +
'<embed type="application/pdf" src="data:application/pdf;base64,' + base64  + '" id="embed_pdf"></embed>' +
 '</object></body></html>');
 newWindow.window.focus();

【讨论】：

你找到什么优雅的解决方案了吗？ :)
没有。我改变了方法并下载了文件，它更干净，更兼容。我将 base64 转换为 blob，使用 blob 在内存中创建一个链接元素并下载它