使用数据URI下载多个文件

Question

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

然而，客户要求一个链接同时下载两个文件，并且不能压缩！不要问我为什么！

在网上搜索后，我找到了以下解决方案：

1）动态创建2个iframes，并在每个表单中将其GET设置为服务器上一个文件的位置，然后运行表单提交...这里

2）使用JQuery插件的变体...(1)..这里

3）打开弹出窗口。（不值得一提）

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

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

_str是一个二维的扁平化数组。

我能在其中加入或者附加第二个文件吗？

- Sam Hammamy

Answer 1

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

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。

这是我网站上包含所有详细信息的 文章。

- Diego La Monica