【问题标题】:Style html table when saving as csv file [duplicate]保存为csv文件时样式html表[重复]
【发布时间】:2019-06-14 23:34:30
【问题描述】:

我有下表

<table>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>
<br/>
<table>
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<br/>
<table>
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<button>Export HTML table to CSV file</button>

我有下面的 JS 代码

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);

        csv.push(row.join(","));        
    }

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.querySelector("button").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
    export_table_to_csv(html, "table.csv");
});

此代码将 html 表转换为 csv 文件以供下载。我想知道是否有可能以某种方式为其添加一些样式,因此当在 Excel 中打开 csv 时,它会显示带有某种颜色的表头。

这是小提琴Fiddle

谢谢

【问题讨论】:

标签: javascript jquery html css


【解决方案1】:

很遗憾,没有! CSV 文件基本上是原始单元格数据,根本没有任何格式。

如果您想要一些样式,则需要学习以下格式之一。但这会复杂得多。

  • Office Open XML — 适用于 Excel 2007 及更高版本
  • Excel 2003 XML - 适用于 Excel 2003 及更高版本
  • 开放文档格式 (.ods) — 可由 Excel 2010 读取。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2017-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-25
  • 1970-01-01
  • 1970-01-01
  • 2016-08-19
相关资源
最近更新 更多