javascript - "Failed - Network Error"尝试使用 'download' 属性在 HTML5 中提供下载时

Question

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

• 从用户那里获取文件(使用“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 上运行

Answer 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)?