“失败 - 网络错误”尝试使用“下载”属性在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)
    });
});

用户单击“Transform Uploaded Files”按钮，然后将href更新为生成的zipfile位置，然后通过单击“Download File”HTML下载生成的包。

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

我希望得到答案的问题

• 这里看起来有什么问题？
• 这是否是正确的方法？我正在尝试做的就是在完成该过程后将文件发送回用户。我担心“file：//”无论如何都不正确，当服务器实际远离使用它的用户时，我会失败（目前它是本地的，因为我正在开发它）

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

Answer 1

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

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

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

Answer 2

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

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

$.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"
        });
    }
});