0

我正在尝试从我的应用程序（客户端）创建和导出一堆 CSV 文件。对于导出部分，这是我到目前为止所遵循的路径（仅供参考，我也在使用 jquery mobile 作为 UI 部分）：

  1. <a>我在 HTML 中创建一个href='#
  2. 我使用 jquery 设置download和属性，target分别传递文件名、文件内容（字符串）和值。href<a>_blank

这是代码，使其更清晰：

HTML

 <a href="#" id="btn1" data-role="button">download 1</a>

查询

$("#btn1").attr({
    'download' : 'file1.csv',
    'href' : "file;one",
    'target' : '_blank'
});

结果按钮工作正常，文件已正确下载，如您在此处看到的那样：FIDDLE（下载的文件似乎已损坏，但我认为这是一件很麻烦的事情..在本地，效果很好）

现在，正如我之前所说，我需要一次导出多个 CSV 文件。我的方法是根据<a>需要创建多个，为每个设置download,target和href属性<a>，然后创建一个download_all-button依次触发每个按钮单击的对象。这是代码：

HTML

<div id="mypage" data-role="page">
    <a href="#" id="btn1" data-role="button">download 1</a>
    <a href="#" id="btn2" data-role="button">download 2</a>
    <a href="#" id="btn3" data-role="button">download 3</a>
    <a href="#" id="downloadall" data-role="button" >DOWNLOAD ALL</a>
</div>

查询

$("#btn1").attr({
    'download' : 'file1.csv',
    'href' : "file;one",
    'target' : '_blank'
});
$("#btn2").attr({
    'download' : 'file2.csv',
    'href' : "file;two",
    'target' : '_blank'
});
$("#btn3").attr({
    'download' : 'file3.csv',
    'href' : "file;three",
    'target' : '_blank'
});
$("#downloadall").on("click", function(){
   document.getElementById("btn1").click();
   document.getElementById("btn2").click();
   document.getElementById("btn3").click();
});

再次，这是小提琴：FIDDLE DOWNLOAD ALL

这似乎也有效，太棒了！现在的问题：

  1. 是正确的方法吗？我在互联网上没有找到更多关于“使用 JS 客户端导出 csv”的信息。
  2. 为什么它使用.click()jQuery 起作用而调用 jQuery 不起作用.trigger("click")？（参见这里的小提琴：TRIGGER CLICK
  3. 在Firefox中，那段代码似乎打开了新标签而不是下载文件..与download属性有关？

提前感谢您的帮助，最好的问候

4

2 回答 2

2

  1. 是正确的方法吗？我在互联网上没有找到更多关于“使用 JS 客户端导出 csv”的信息。

    • 我会选择不。考虑一次性下载包含所有文件的单个 zip。我会说一些浏览器不喜欢你的方法，反垃圾邮件工具会更不喜欢它。

  2. 为什么它使用 .click() 可以工作，而调用 jQuery .trigger("click") 却不能工作？

  3. 在Firefox中，那段代码似乎打开了新标签而不是下载文件..与下载属性有关吗？

    • target="_blank"意思是“在新标签页中打开”。尝试target="_top"或target="_self"。
于 2013-09-07T09:48:51.103 回答
0

试试这个：

$("#downloadall").on("click", function(){
    document.getElementById("btn1").click()+document.getElementById("btn2").click()+document.getElementById("btn3").click();      
    /*document.getElementById("btn2").click();
      document.getElementById("btn3").click();*/
});

演示

于 2013-09-07T09:37:29.550 回答