尝试使用“下载”属性在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中进行了测试，并且使用开发人员控制台，我可以在单击下载按钮之前看到。奇怪的是，当我点击“显示所有下载”，然后点击失败的下载，它成功完成。

我希望得到答案的问题

• 这里似乎出了什么问题？
• 这样做对吗？我所要做的就是在进程结束时将文件发送回用户。我担心“file://”无论如何都是不正确的，当服务器与使用它的用户实际上是远程的（目前它是本地的，因为我正在开发它）时，它会使我失败

编辑：我要补充的是，它的后端当前正在Python的Flask上运行

Answer 1

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

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

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

Answer 2

显然这是一个Chrome的问题，因为数据URL太长了。我自己还在努力，但显然有一些解决方案涉及Blob对象。

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

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