如何将 html 表格数据导出为 .csv 文件？

Posted 2023-02-14

技术标签:

【中文标题】如何将 html 表格数据导出为 .csv 文件？【英文标题】：How do I export html table data as .csv file? 【发布时间】：2011-11-01 22:21:24 【问题描述】：

我在网站的 html 表中有一个数据表，需要知道如何将这些数据导出为 .csv 文件。

如何做到这一点？

【问题讨论】：

多少数据？这是一次性工作还是需要多次运行？很确定您将不得不解析页面并从数据中手动生成 csv。可能看到***.com/questions/2627162/how-to-convert-html-to-csv 请在下面找到下载 JQuery 实用程序的链接，该实用程序允许您将任何 HTML 表格导出为 CSV 文件。它非常方便的工具，特别是在报告项目的开发过程中使用。当您将一些 3rd 方 jQuery 表格搜索插件附加到您的表格时，它也很有用。 kunalbabre.com/projects/table2CSV.php Export to CSV using jQuery and html的可能重复 【参考方案1】：

要将 html 导出到 csv，请尝试按照此示例进行操作。更多详细信息和示例，请访问 ~~author's website~~。

创建一个 html2csv.js 文件并将以下代码放入其中。

jQuery.fn.table2CSV = function(options) 
    var options = jQuery.extend(
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    ,
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) 
        for (var i = 0; i < numCols; i++) 
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        
     else 
        $(el).filter(':visible').find('th').each(function() 
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        );
    

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() 
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() 
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        );
        row2CSV(tmpRow);
    );
    if (options.delivery == 'popup') 
        var mydata = csvData.join('\n');
        return popup(mydata);
     else 
        var mydata = csvData.join('\n');
        return mydata;
    

    function row2CSV(tmpRow) 
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') 
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        
    
    function formatData(input) 
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    
    function popup(data) 
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    
;

将 js 文件包含到 html 页面中，如下所示：

<script type="text/javascript" src="jquery-1.3.2.js" ></script>

<script type="text/javascript" src="html2CSV.js" ></script>

表格：

<table id="example1" border="1"  style="background-color:#FFFFCC"  cellpadding="3" cellspacing="3">

    <tr>

        <th>Title</th>

        <th>Name</th>

        <th>Phone</th>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>John</td>

        <td>07868785831</td>

    </tr>

    <tr>

        <td>Miss</td>

        <td><i>Linda</i></td>

        <td>0141-2244-5566</td>

    </tr>

    <tr>

        <td>Master</td>

        <td>Jack</td>

        <td>0142-1212-1234</td>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>Bush</td>

        <td>911-911-911</td>

    </tr>

</table>

导出按钮：

<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV(header:['prefix','Employee Name','Contact'])">

【讨论】：

您好，非常感谢您及时详细的回复。我尝试了您的代码，但 javascript 中似乎存在许多错误。我不是 Javascript 大师，所以我不知道如何解决它。谢谢。但是你能提一下错误吗？并告诉我你是否先尝试过上面的例子？这对我来说很好。我正在使用 jQuery 1.7.2。非常感谢！这里不爱 - jquery 1.7.3，按下该按钮没有任何反应:( 感谢您的回答。如果我的表格有分页，我想下载整个表格而不是当前的可见行怎么办？谢谢！【参考方案2】：

如果不经常需要，请尝试几个 Firefox 插件之一，这些插件有助于将 HTML 表格数据复制到剪贴板（例如，https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/）。例如，对于“table2clipboard”插件：

在 Firefox 中安装插件在 Firefox 中打开网页（带有表格）右键单击表格中的任意位置并选择“复制整个表格” 启动 LibreOffice Calc 等电子表格应用程序粘贴到电子表格中（根据需要选择适当的分隔符）将电子表格保存/导出为 CSV。

【讨论】：

【参考方案3】：

这是一个非常快速的 CoffeeScript/jQuery 示例

csv = []
for row in $('#sometable tr')
  csv.push ("\"#col.innerText\"" for col in $(row).find('td,th')).join(',')
output = csv.join("\n")

【讨论】：

【参考方案4】：

您可以使用 Chrome 的扩展程序，在我尝试过的时候效果很好。

https://chrome.google.com/webstore/search/html%20table%20to%20csv?_category=extensions

当您安装并在任何带有表格的网页上单击此扩展程序的图标时，它会显示页面中的所有表格，当您滚动它列出的表格时突出显示每个表格，单击允许您将其复制到剪贴板或将其保存到 Google 文档中。

它非常适合我的需要，即偶尔将基于 Web 的表格数据转换为我可以使用的电子表格。

【讨论】：

【参考方案5】：

我已经简要介绍了一种使用 Google 电子表格 (importHTML) 和 Python (Pandas read_html 和 to_csv) 以及我的 SO 答案中的示例 Python 脚本的简单方法：@987654321 @。

【讨论】：

【参考方案6】：

我能够使用此处概述的答案：Export to CSV using jQuery and html 并添加了一项修改以使其在 IE 中工作，并添加了 cmets 中提到的另一项修改以从表中获取 thead。

function exportTableToCSV($table, filename) 

    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // Temporary delimiter characters unlikely to be typed by keyboard
        // This is to avoid accidentally splitting the actual contents
        tmpColDelim = String.fromCharCode(11), // vertical tab character
        tmpRowDelim = String.fromCharCode(0), // null character

        // actual delimiter characters for CSV format
        colDelim = '","',
        rowDelim = '"\r\n"',

        // Grab text from table into CSV formatted string
        csv = '"' + $rows.map(function (i, row) 
            var $row = $(row), $cols = $row.find('td,th');

            return $cols.map(function (j, col) 
                var $col = $(col), text = $col.text();

                return text.replace(/"/g, '""'); // escape double quotes

            ).get().join(tmpColDelim);

        ).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim) + '"',



        // Data URI
        csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

        console.log(csv);

        if (window.navigator.msSaveBlob)  // IE 10+
            //alert('IE' + csv);
            window.navigator.msSaveOrOpenBlob(new Blob([csv], type: "text/plain;charset=utf-8;"), "csvname.csv")
         
        else 
            $(this).attr( 'download': filename, 'href': csvData, 'target': '_blank' ); 
        


// This must be a hyperlink
$("#xx").on('click', function (event) 

    exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
);

我的链接看起来像这样......

<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>

JsFiddle：https://jsfiddle.net/mnsinger/65hqxygo/

【讨论】：

很好的答案。感谢分享。这正是我想要的！正是我需要的！谢谢很好的答案，谢谢！有没有办法指定用 Excel 打开 CSV 时列的宽度？【参考方案7】：

感谢gene tsai，以下是对他的代码的一些修改，以便在我的目标页面上运行：

csv = []
rows = $('#data tr');
for(i =0;i < rows.length;i++) 
    cells = $(rows[i]).find('td,th');
    csv_row = [];
    for (j=0;j<cells.length;j++) 
        txt = cells[j].innerText;
        csv_row.push(txt.replace(",", "-"));
    
    csv.push(csv_row.join(","));

output = csv.join("\n")

改进：

使用通用 JavaScript for 循环确保每个单元格没有逗号

【讨论】：

【参考方案8】：

下面的方案可以做到。

$(function() 
  $("button").on('click', function() 
    var data = "";
    var tableData = [];
    var rows = $("table tr");
    rows.each(function(index, row) 
      var rowData = [];
      $(row).find("th, td").each(function(index, column) 
        rowData.push(column.innerText);
      );
      tableData.push(rowData.join(","));
    );
    data += tableData.join("\n");
    $(document.body).append('<a id="download-link" download="data.csv" href=' + URL.createObjectURL(new Blob([data], 
      type: "text/csv"
    )) + '/>');


    $('#download-link')[0].click();
    $('#download-link').remove();
  );
);

table 
  border-collapse: collapse;


td,
th 
  border: 1px solid #aaa;
  padding: 0.5rem;
  text-align: left;


td 
  font-size: 0.875rem;


.btn-group 
  padding: 1rem 0;


button 
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 0.5rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 1rem;


button:hover 
  cursor: pointer;
  background-color: #000;
  color: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Author</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jQuery</td>
      <td>John Resig</td>
      <td>The Write Less, Do More, JavaScript Library.</td>
    </tr>
    <tr>
      <td>React</td>
      <td>Jordan Walke</td>
      <td>React makes it painless to create interactive UIs.</td>
    </tr>
    <tr>
      <td>Vue.js</td>
      <td>Yuxi You</td>
      <td>The Progressive JavaScript Framework.</td>
    </tr>
  </tbody>
</table>

<div class="btn-group">
  <button>csv</button>
</div>

【讨论】：

以上是关于如何将 html 表格数据导出为 .csv 文件？的主要内容，如果未能解决你的问题，请参考以下文章

如何将MySql Workbench中的表格数据导出为csv？

如何将csv导入mysql和mysql导出csv

JS导出数据为表格-csv

如何将带有中文字符的 Excel 文件导出为 CSV？

如何通过按钮单击将数据导出到 linq c# 中的 .csv 文件

如何将access中的数据导出为EXCEL文件？