2017-03-22 180 views
2

的什么,我试图做的基本总结,在HTML5提供下载:

  • 采取从用户的文件(使用“悬浮窗”拖放引导模块收到文件)
  • 修改和单个文件做一些对文件的“工作”
  • Zip文件一起下载
  • 发送下载回用户下载(自动或链接,详细以下)

上面的粗体行是一个不工作,我试图弄清楚。下面是相关的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所得到的zip文件的位置,然后可以通过点击下载最终的包在“下载文件”HTML。

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

问题希望得到解答

  • 似乎是错怎么回事?
  • 这甚至是正确的方法吗?我所要做的就是在完成过程后将文件发送回用户。我担心“file://”是不正确的,当服务器实际上远离用户使用它时(当前是本地的,因为我正在开发它)会使我失败。

编辑:我应该补充一点,后端是目前在Python的Flask上运行的

回答

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" 
     }); 
    } 
}); 
相关问题