javascript - Chrome 通过 iframe 下载文件时出错

标签 javascript jquery iframe

我正在向服务器提交 JSON 数据。服务器生成一个 PDF 文件并使用该 PDF 文件的 URL 进行响应。然后我向服务器发出另一个请求以下载 PDF 文件。为了进行下载,我创建了一个隐藏的 iframe 并将源设置为 PDF url。请注意,我希望用户的浏览器停留在同一页面并在后台下载。有关我正在做的事情和我采用的解决方案的更多详细信息,请参阅 this SO question .

每当我在 Chrome 中使用这种技术时,一切正常。但是查看 chrome 开发人员控制台,我看到错误消息 Failed to load resource有没有办法以不同的方式执行此操作,以免出现这些错误?

一个非常简单和有效的 example of the problem in action可以在jsfiddle上看到。只需点击“下载 PDF”按钮并查看您的 Chrome 控制台。

该页面上的代码如下所示:

$(document).ready( function() {
    var downloadFile = function(url){
        var iframe = $("iframe#download");
        if (!iframe.length) {
            iframe = $("<iframe id='download' style='display:none;'/>");
            $("body").append(iframe);
        }
        iframe.attr("src", url);
    };

    $("button").click(function() {    
        downloadFile("http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
    });
});

最佳答案

其他受访者建议更改内容类型 header ,这应该同样有效,但有一个特定的响应 header 用于指示浏览器如何处理文件。

以下应强制下载 pdf 而不是在浏览器中显示:

"Content-disposition: attachment; filename=[你的文件名]"

关于javascript - Chrome 通过 iframe 下载文件时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4351273/

相关文章:

javascript - jQuery如何更新表中的行数范围

jquery - PrettyPhoto - 将唯一参数从 iframe 窗口传递到父页面

javascript - 如何检查事件是否被触发?

javascript - 如何在忽略空格的情况下匹配另一个字符串中的字符串

jquery - 尝试将 staggerTo 与 GSAP 一起使用

jquery - 在选择框外部单击时缩回选择选项

javascript - 将 javascript 注入(inject)门户应用程序的 iframe

javascript - iframe 中的元素如何捕获关键事件?

javascript - 检查两个值是否为负数

javascript - 如果 vue 中的特定选项卡没有显示任何内容,如何隐藏或不显示选项卡?