在 jQuery 中导出到 csv

IT技术 javascript asp.net jquery csv
2021-01-24 09:02:15

我正在动态生成一个 div,如下所示:

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

页面上还有更多元素。现在,我怎样才能得到这样的 csv 文件:

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

使用 jQuery 吗?

也需要一个文件保存对话框,像这样:

替代文字

谢谢。

6个回答

您只能在客户端,在接受数据 URI 的浏览器中执行此操作

data:application/csv;charset=utf-8,content_encoded_as_url

在您的示例中,数据 URI 必须是:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

您可以通过以下方式调用此 URI:

  • 使用 window.open
  • 或设置 window.location
  • 或通过href
  • 通过添加download它可以在 chrome 中工作属性,仍然需要在 IE 中进行测试。

要进行测试,只需复制上面的 URI 并粘贴到浏览器地址栏中即可。或者在 HTML 页面中测试以下锚点:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

要创建内容,从表中获取值,您可以使用table2CSV并执行以下操作:

var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

大多数(如果不是全部)版本的 IE 不支持导航到数据链接,因此必须实施 hack,通常使用iframe. 使用一个iFrame 联合document.execCommand('SaveAs'..),你可以得到的IE浏览器的大多数目前使用的版本类似的行为。

这适用于/不适用于哪些浏览器?它似乎在 Chrome 中不起作用。
2021-03-19 09:02:15
所以它说,但我测试了你的答案,它对我来说在 IE9 或 Chrome 上都不起作用。
2021-03-25 09:02:15
@italo 当我通过执行此操作window.location或将window.open其保存为“x4ef3.part”,而不是“somename.csv”。如何将其另存为“.csv”文件?
2021-03-27 09:02:15
在 Firefox 23 和 Chrome 28 上对此进行了测试,并且可以正常工作。无法在 IE11 上测试。
2021-03-30 09:02:15
Chrome 支持数据 URI。看看:en.wikipedia.org/wiki/Data_URI#Web_browser_support
2021-04-10 09:02:15

这是我的实现(基于:https : //gist.github.com/3782074):

用法:HTML:

<table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

JS:

$("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

代码

jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.push('"' + tmpStr + '"');
                  }
             });
          csvData.push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

注意事项

  • 它使用“th”标签作为标题。如果它们不存在,则不会添加它们。
  • 此代码检测以下格式的数字:-####.##(您需要修改代码以接受其他格式,例如使用逗号)。

更新

我之前的实现工作正常,但没有设置 csv 文件名。代码已修改为使用文件名,但它需要一个 < a > 元素。似乎您无法动态生成 < a > 元素并触发“单击”事件(可能是出于安全原因?)。

演示

http://jsfiddle.net/nLj74t0f/

(不幸的是,jsfiddle 无法生成文件,而是抛出一个错误:“请使用 POST 请求”,不要让该错误阻止您在应用程序中测试此代码)。

我认为在检查 th 之后,else 中有一个额外的 if $(this).find("td").each(function() { 语句。
2021-03-21 09:02:15
2021-03-25 09:02:15

我最近为此发布了一个免费软件库:“html5csv.js”——GitHub

它旨在帮助简化在 Javascript 中创建小型模拟器应用程序的过程,这些应用程序可能需要导入或导出 csv 文件、操作、显示、编辑数据、执行各种数学程序(如拟合等)。

加载“html5csv.js”后,扫描表格并创建CSV的问题是单行的:

CSV.begin('#PrintDiv').download('MyData.csv').go();

这是带有此代码的示例JSFiddle 演示

在内部,对于 Firefox/Chrome,这是一个面向数据 URL 的解决方案,类似于@italo、@lepe 和 @adeneo(在另一个问题上)提出的解决方案。浏览器

CSV.begin()调用将系统设置为将数据读入内部数组。然后发生该提取。然后在.download()内部生成一个数据 URL 链接并使用链接点击器点击它。这会将文件推送给最终用户。

根据caniuse IE10 不支持<a download=...>. 所以对于 IE,我的库在navigator.msSaveBlob()内部调用,正如@Manu Sharma建议的

@IanLim 我在上面的 SO 链接中加入了该技术,并且可以确认 html5csv 库现在在 IE11 中生成 csv 文件。
2021-03-31 09:02:15

以下是仅从客户端触发下载问题的两种解决方法在以后的浏览器中,您应该查看“blob”


1.拖放表格

您知道吗,您可以简单地将表格拖放到 Excel 中?

以下是如何选择要剪切和过去或拖动的表格

使用 Javascript 选择一个完整的表格(要复制到剪贴板)


2. 从你的 div 创建一个弹出页面

虽然它不会产生保存对话框,但如果生成的弹出窗口以扩展名.csv保存,Excel 将对其进行正确处理。

该字符串可以
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
例如用制表符分隔,并带有换行符。

有插件可以为您创建字符串 - 例如http://plugins.jquery.com/project/table2csv

var w = window.open('','csvWindow'); // popup, may be blocked though
// the following line does not actually do anything interesting with the 
// parameter given in current browsers, but really should have. 
// Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); // the csv string from for example a jquery plugin
w.document.close();

免责声明:这些是解决方法,并不能完全回答目前对大多数浏览器都有答案的问题:仅在客户端上不可能

获得可以a使用download="myfile.csv"type="text/csv"属性创建的 CSV 数据后,使用将 CSV 数据编码为 base64btoa并将src属性设置"data:text/csv;base64,P2ZyB4bW.....xucz0===",将a元素附加到 DOM(隐藏它)并单击它,它将下载文件。
2021-03-20 09:02:15
是的,我知道,在本页的另一个答案中回答了。
2021-03-22 09:02:15
又一次未评论的否决票。除非你发表评论,否则毫无value的姿态!
2021-04-05 09:02:15

仅使用 jQuery,您无法避免服务器调用。

但是,为了实现此结果,我使用了Downloadify,它使我无需进行另一个服务器调用即可保存文件。这样做可以减少服务器负载并提供良好的用户体验。

要获得正确的 CSV,您只需去掉所有不必要的标签并在数据之间放置一个“,”。

这个东西需要 Flash,所以它不能移植到所有的浏览器,用数据检查下面的答案:应用程序驱动的 HREF。简单,干净。
2021-03-26 09:02:15
除了需要Flash之外,这个解决方案没有遵循问题要求:使用jQuery并避免服务器调用。
2021-03-30 09:02:15
好吧,Pratik 说客户端并避免服务器调用。便携性并不总是重要的。如果它符合他的需要,为什么不呢。
2021-03-30 09:02:15
Flash 是客户端的负担,并且由于减少了对跨设备 Flash 的支持,因此严重不推荐。
2021-04-04 09:02:15