html - 使用数据 URI 下载多个文件

Question

我知道如何在 anchor 上设置 href 和下载属性，以允许用户将数据下载为文件。

但是，客户要求一个链接同时下载两个文件并且不要压缩!不要问我为什么!

上网查了下解决办法:

1) 即时创建 2 个 iframe，并在每个表单中将其 GET 设置为服务器上其中一个文件的位置，然后运行表单提交... here

2) (1) 的变体使用 JQuery 插件.. here

3) 打开弹出窗口。 (不值得链接)

我想知道我是否可以在 JS 端处理这个问题？在同一个应用程序中，我使用以下代码将数据导出到 CSV:

$elm.attr('href', 'data:text/csv;charset=utf8,' + encodeURIComponent(_str)).attr('download', fileName);

其中 _str 是扁平化的二维数组。

我能以某种方式跟踪或附加第二个文件吗？

Answer 1

您可以动态创建链接并触发 navite 点击事件。

function downloadAll(files){
    if(files.length == 0) return;
    file = files.pop();
    var theAnchor = $('<a />')
        .attr('href', file[1])
        .attr('download',file[0]);
    theAnchor[0].click(); 
    theAnchor.remove();
    downloadAll(files);
}

$('a.download-csv').on('click', function(){
    downloadAll([

        ['file1.csv', 'data:text/csv;charset=utf8,'+ 
                     encodeURIComponent('my,csv,file\and,so,on')],

        ['file2.csv', 'data:text/csv;charset=utf8,'+ 
                     encodeURIComponent('my,csv,file\and,so,on')],

        ['file3.csv', 'data:text/csv;charset=utf8,'+ 
                     encodeURIComponent('my,csv,file\and,so,on')]

    ]);
});

在这里您可以找到 fiddle带有工作演示。

这是 article on my web site包含所有详细信息