尝试使用“下载”属性以 HTML5 提供下载时出现“失败 - 网络错误”

Posted 2023-02-23

【中文标题】尝试使用“下载”属性以 HTML5 提供下载时出现“失败 - 网络错误”

【英文标题】："Failed - Network Error" When trying to provide download in HTML5 using 'download' attribute

【发布时间】：2017-08-14 23:27:38

【问题描述】：

我正在尝试做的基本总结：

从用户那里获取文件（使用“dropzone”拖放引导模块来接收文件） 修改文件并做一些“工作” 压缩文件一起下载单个文件

将下载内容发送回用户以供下载（自动或通过链接，详情如下）

上面的粗线是行不通的，我正试图弄清楚。以下是该部分的相关 html 和 javascript：

<button type="button" class="btn btn-primary" id="transform">
    <span class="glyphicon glyphicon-wrench"></span>
    Transform Uploaded Files
</button>
<a id="test_dl" href="" download="user_download.zip">
    Download File
</a>
$('#transform').click(function (e) 

    $.getJSON('/transform', , function (final_zip)
        var zipfile = "file://" + final_zip.zip_filename

        $('a#test_dl').attr("href", zipfile)
    );
);

用户单击“转换上传的文件”按钮，然后将 href 更新为生成的 zipfile 位置，然后能够通过单击“下载文件”HTML 下载生成的包。

到目前为止，我已经在 Chrome 中对此进行了测试，并且使用开发者控制台我可以看到在单击下载按钮之前 href 正在正确更新，但它总是给出一个“失败 - 网络错误”对话框。奇怪的是，当我点击“显示所有下载”，然后点击失败的下载，就成功完成了。

希望得到解答的问题

这里似乎出了什么问题？ 这甚至是正确的方法吗？我要做的就是在处理完成后将文件发送回用户。我担心“file://”无论如何都不正确，并且当服务器实际上远离使用它的用户时（目前它是本地的，因为我正在开发它）会让我失败

编辑：我应该补充一点，它的后端当前正在 Python 的 Flask 上运行

【参考方案1】：

显然这是数据 URL 过长的 Chrome 问题。我自己仍在研究它，但显然有一些涉及 Blob 对象的解决方案。

请看这里：Download Canvas as PNG in fabric.js giving network Error

在这里：How to export JavaScript array info to csv (on client side)?

【参考方案2】：

基于How to export JavaScript array info to csv (on client side)?，这是我针对此问题实施解决方案的方式：

请注意，我只需要 Chrome - web 的解决方案，所以这是我使用的。要获得完整的解决方案，您需要查看原始答案中的示例

$.ajax(
    url: "/getData",
    dataType: "text",
    success: function(data)            
        $("#download").attr(
            "value": "Download",
            "href": URL.createObjectURL(new Blob([data], 
                  type: "application/octet-stream"
            )),
            "download": "outputFile.csv"
        );
    
);