我正在尝试在我的网站中添加 csv 下载选项的功能。它应该将网站中存在的 html 表转换为 csv 内容并使其可下载。我一直在互联网上搜索一个好的插件，发现了一些有用的插件，比如http://www.dev-skills.com/export-html-table-to-csv-file/ 但它使用 php 脚本来完成下载部分。我想知道是否有一个纯 javascript 库可以使用诸如 node.js 之类的服务器端软件而不使用 php 来执行此功能？
使用 vanilla javascript 将 HTML 表导出为 CSV
IT技术
javascript
jquery
node.js
html-table
export-to-csv
2021-02-22 17:48:07
6个回答
应该适用于所有现代浏览器并且没有 jQuery 或任何依赖项，这里是我的实现：
// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
// Select rows from table_id
var rows = document.querySelectorAll('table#' + table_id + ' tr');
// Construct csv
var csv = [];
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll('td, th');
for (var j = 0; j < cols.length; j++) {
// Clean innertext to remove multiple spaces and jumpline (break csv)
var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
// Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
data = data.replace(/"/g, '""');
// Push escaped string
row.push('"' + data + '"');
}
csv.push(row.join(separator));
}
var csv_string = csv.join('\n');
// Download it
var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
var link = document.createElement('a');
link.style.display = 'none';
link.setAttribute('target', '_blank');
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
然后添加您的下载按钮/链接：
<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>
CSV 文件带有时间限制并与默认 Excel 格式兼容。
评论后更新：添加了第二个参数“分隔符”，它可用于配置另一个字符，如;，如果您有用户在世界不同地区下载您的 csv 很有用，因为他们可以使用 Excel 的另一个默认分隔符，有关更多信息，请参见: https://superuser.com/a/606274/908273
使用 just jQuery、 vanillaJavascript和table2CSV库：
导出到 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);
});
});
})
笔记：
需要jQuery和table2CSV：在上述脚本之前添加对这两个库的脚本引用。
该table选择作为一个例子，可以调整，以满足您的需求。
它仅适用于完全Data URI支持的浏览器：Firefox、Chrome 和 Opera，不适用于 IE，后者仅支持Data URIs将二进制图像数据嵌入到页面中。
为了完全兼容浏览器，您必须使用一种稍微不同的方法，该方法需要一个服务器端脚本到echoCSV。
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>
使用它非常容易，因为我已经尝试了大多数其他方法。
您不需要服务器端的 PHP 脚本。仅在客户端执行此操作，在接受数据 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
- 通过添加下载属性，它可以在 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>
要创建内容，从表中获取值，您可以使用MelanciaUK提到的table2CSV并执行以下操作：
var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
(1) 这是针对此问题的原生 javascript 解决方案。它适用于大多数现代浏览器。
function export2csv() {
let data = "";
const tableData = [];
const rows = document.querySelectorAll("table tr");
for (const row of rows) {
const rowData = [];
for (const [index, column] of row.querySelectorAll("th, td").entries()) {
// To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
if ((index + 1) % 3 === 0) {
rowData.push('"' + column.innerText + '"');
} else {
rowData.push(column.innerText);
}
}
tableData.push(rowData.join(","));
}
data += tableData.join("\n");
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
a.setAttribute("download", "data.csv");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}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;
}<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 onclick="export2csv()">csv</button>
</div>(2) 如果你想要一个纯javascript库，FileSaver.js可以帮你保存触发文件下载的代码片段。此外，FileSaver.js 将不负责构建导出内容。您必须以您想要的格式自行构建内容。