javascript - table导出csv - vue导出csv文件




将html表导出到csv (4)

我想在我的网站上添加csv下载选项的功能。 它应该将网站中的html表转换为csv内容并使其可下载。 我一直在互联网上寻找一个好的插件,并找到了一些像http://www.dev-skills.com/export-html-table-to-csv-file/这样的用途,但它使用php脚本来做下载部分。 我想知道是否有一个纯javascript库可用于使用服务器端软件如node.js而不使用php?


http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html有一个非常简单的免费开源解决方案

首先从https://github.com/jmaister/excellentexport/releases/tag/v1.4下载javascript文件和示例文件

html页面如下所示。

确保javascript文件位于同一文件夹中,或相应地更改html文件中脚本的路径。

<html>
<head>
    <title>Export to excel test</title>
    <script src="excellentexport.js"></script>
    <style>
        table, tr, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>ExcellentExport.js</h1>

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.

    <h3>Test page</h3>

    <br/>

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
    <br/>

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
    <br/>

    <table id="datatable">
        <tr>
            <th>Column 1</th>
            <th>Column "cool" 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>100,111</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>More text</td>
            <td>Text with
                new line</td>
        </tr>
    </table>

</body>

这很容易使用,因为我已经尝试了大多数其他方法。


使用上面的答案,但根据我的需要改变它。

我使用以下函数并导入到我需要下载csv文件的REACT文件中。

我的元素中有一个span标记。 添加了大多数函数/方法的注释。

import { tableToCSV, downloadCSV } from './../Helpers/exportToCSV';


export function tableToCSV(){
  let tableHeaders = Array.from(document.querySelectorAll('th'))
    .map(item => {
      // title = splits elem tags on '\n',
      // then filter out blank "" that appears in array.
      // ex ["Timestamp", "[Full time]", ""]
      let title = item.innerText.split("\n").filter(str => (str !== 0)).join(" ")
      return title
    }).join(",")

  const rows = Array.from(document.querySelectorAll('tr'))
  .reduce((arr, currRow) => {
    // if tr tag contains th tag.
    // if null return array.
    if (currRow.querySelector('th')) return arr

    // concats individual cells into csv format row.
    const cells = Array.from(currRow.querySelectorAll('td'))
      .map(item => item.innerText)
      .join(',')
    return arr.concat([cells])
  }, [])

return tableHeaders + '\n' + rows.join('\n')
}

export function downloadCSV(csv){
  const csvFile = new Blob([csv], { type: 'text/csv' })
  const downloadLink =  document.createElement('a')
  // sets the name for the download file
  downloadLink.download = `CSV-${currentDateUSWritten()}.csv`
  // sets the url to the window URL created from csv file above
  downloadLink.href = window.URL.createObjectURL(csvFile)
  // creates link, but does not display it.
  downloadLink.style.display = 'none'
  // add link to body so click function below works
  document.body.appendChild(downloadLink)

  downloadLink.click()
}

当用户单击导出到csv时,它会触发以下函数。

  handleExport = (e) => {
    e.preventDefault();
    const csv = tableToCSV()
    return downloadCSV(csv)
  }

示例html表elems。

  <table id="datatable">
        <tbody>
          <tr id="tableHeader" className="t-header">
            <th>Timestamp
              <span className="block">full time</span></th>
            <th>current rate
              <span className="block">alt view</span>
            </th>
            <th>Battery Voltage
              <span className="block">current voltage
              </span>
            </th>
            <th>Temperature 1
              <span className="block">[C]</span>
            </th>
            <th>Temperature 2
              <span className="block">[C]</span>
            </th>
            <th>Time & Date </th>
          </tr>

        </tbody>
        <tbody>
          {this.renderData()}
        </tbody>
      </table>
    </div>

我发现这里有一个图书馆。 见这里的例子:

https://editor.datatables.net/examples/extensions/exportButtons.html

除了上面的代码之外,还加载了以下Javascript库文件以供在此示例中使用:

在HTML中,包括以下脚本:

jquery.dataTables.min.js   
dataTables.editor.min.js   
dataTables.select.min.js
dataTables.buttons.min.js  
jszip.min.js    
pdfmake.min.js
vfs_fonts.js  
buttons.html5.min.js    
buttons.print.min.js

通过添加以下脚本启用按钮:

<script>
$(document).ready( function () {
    $('#table-arrays').DataTable({
        dom: '<"top"Blf>rt<"bottom"ip>',
        buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
        select: true,
    });
} );
</script>

由于某种原因,excel导出会导致文件损坏,但可以修复。 或者,禁用excel并使用csv export。


仅使用jQuery ,vanilla Javascripttable2CSV库:

export-to-html-table-as-csv-file-using-jquery

将此代码放入要在head部分加载的脚本中:

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

笔记:

需要jQuerytable2CSV :在上面的脚本之前向两个库添加脚本引用。

table选择器用作示例,可以根据您的需要进行调整。

它仅适用于具有完整Data URI支持的浏览器:Firefox,Chrome和Opera,而不是IE,它仅支持将二进制图像数据嵌入页面的Data URIs

要获得完全的浏览器兼容性,您必须使用稍微不同的方法,该方法需要服务器端脚本echo显CSV。





export-to-csv