Chrome 通过顶部框架导航阻止 Web 重定向到新选项卡的 PDF 视图答案

【问题标题】：Chrome blocking PDF views on web redirection to new tab via Top-Frame NavigationsChrome 通过顶部框架导航阻止 Web 重定向到新选项卡的 PDF 视图
【发布时间】：2025-12-23 10:30:04
【问题描述】：

根据 Chrome 版本 >=60，任何顶部框架导航选项（如

）的 PDF 视图功能

<A HREF=”data:…”>
window.open(“data:…”)
window.location = “data:…”

已被 Google 屏蔽，相关讨论可在 Google Groups 找到。现在的问题是如何在不明确或强制下载 PDF 的情况下在 Web 上显示 PDF。我的旧代码通过window.open查看PDF数据如下所示

dataFactory.getPDFData(id, authToken)
.then(function(res) {
    window.open("data:application/pdf," + escape(res.data));
},function(error){
    //Some Code
}).finally(function(){
    //Some Code
});

在上面我从服务器中提取 PDF 数据并显示它。但是由于window.open 被Chrome 阻止，并且正如here 的一位专家所建议的那样，使用<iframe> 打开PDF 数据，我尝试了但它不起作用。它总是说无法加载PDF数据，如下所示

<iframe> 更新后的 JS 代码如下：

dataFactory.getPDFData(id, authToken)
.then(function(res) {
    $scope.pdfData = res.data;
},function(error){
    //Some Code
}).finally(function(){
    //Some Code
});

HTML 如下所示：

<iframe src="data:application/pdf;base64,pdfData" height="100%" width="100%"></iframe>

如何继续并恢复原来的 PDF 视图功能？我搜索了其他堆栈问题，但不知道如何解决这个问题。可能是我做错了什么或错过了 iframe 代码的某些内容，但没有成功。

【问题讨论】：

jsPdf 库有类似的问题。 iframe 为我解决了问题。可以在新窗口中打开PDF，但是我不能下载。

标签： javascript angularjs google-chrome pdf iframe

【解决方案1】：

在找不到想要的结果后，我想出了以下方法来解决问题。我没有在新页面上打开 PDF，而是在用户单击“打印”按钮时立即自动下载 PDF 文件。以下是相同的来源。

//File Name
var fileName = "Some File Name Here";

var binaryData = [];
binaryData.push(serverResponse.data);      //Normal pdf binary data won't work so needs to push under an array

//To convert the PDF binary data to file so that it gets downloaded
var file = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"}));
var fileURL = document.createElement("fileURL");
fileURL.href = file;
fileURL.download = serverResponse.name || fileName;
document.body.appendChild(fileURL);
fileURL.click();

//To remove the inserted element
window.onfocus = function () {                     
    document.body.removeChild(fileURL)
}

【讨论】：

我认为document.createElement("fileURL") 应该是document.createElement("a")。对吗？

【解决方案2】：

在您的旧代码中： "data:application/pdf," + 转义(res.data)

在新的：你的 iframe src 就像 "data:application/pdf;base64,pdfData"

尝试从 src 中删除 base64，它似乎已经存在于 'pdfdata' 的值中。

【讨论】：