javascript - 将 javascript 循环导出到 CSV
问题描述
假设我有这个循环代码。
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
outputDiv.innerHTML += results[j].distance.text + ',';
}
}
我想使用此代码将 outputDiv.innerHTML 导出为 CSV,但它不起作用。
function downloadFile(fileName, urlData) {
var aLink = document.createElement('a');
aLink.download = fileName;
aLink.href = urlData;
var event = new MouseEvent('click');
aLink.dispatchEvent(event);
}
downloadFile('output.csv', 'outputDiv.innerHTML/csv;charset=UTF-8,' + encodeURIComponent(outputDiv.innerHTML));
我应该怎么办?我是新来的。谢谢你。
解决方案
这个解决方案是在JavaScript中。我在按钮上添加了一个事件监听器,所以当它被点击时,它会抓取outerHTML
.<table>
outerHTML
基本上包括元素的开始和结束标签以及内容,innerHTML
而不包括开始和结束标签。
来自MDN 网络文档
Element DOM 接口的
outerHTML
属性获取描述元素(包括其后代)的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。
当innerText
从所有行和列中提取时。download_csv
叫做。
您可以使用一个Blob
对象下载数据,该对象是不可变的原始数据的类似文件的对象。
document.querySelector("button").addEventListener("click", function () {
let html = document.querySelector("table").outerHTML;
exportToCSV(html, "table.csv");
});
function exportToCSV(html, filename) {
let csv = [];
// grab all rows inside table
let rows = document.querySelectorAll("table tr");
let row, cols;
for (let i = 0; i < rows.length; i++) {
row = []; // will hold innerText of all columns
// retrieve all columns of row
cols = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++){
// push column innerText
row.push(cols[j].innerText);
}
// push all innerText into CSV
csv.push(row.join(","));
}
console.log("Extracted content from html:",csv);
// Download CSV
download_csv(csv.join("\n"), filename);
}
function download_csv(csv, filename) {
let csvFile;
let downloadLink;
// CSV FILE
csvFile = new Blob([csv], {type: "text/csv"});
// create an element and set the file name.
downloadLink = document.createElement("a");
downloadLink.download = filename;
// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// prevent link from being shown
downloadLink.style.display = "none";
// Add the link to your DOM
document.body.appendChild(downloadLink);
// start the download
downloadLink.click();
}
<table>
<tr><th>Name</th><th>Age</th><th>Country</th></tr>
<tr><td>Tony</td><td>26</td><td>USA</td></tr>
<tr><td>Levi</td><td>19</td><td>Spain</td></tr>
<tr><td>Calvin</td><td>32</td><td>Russia</td></tr>
</table>
<button>Export HTML table to CSV file</button>
推荐阅读
- php - 该代码仅输出第一行
- visual-studio - Servicenow 请求正文超出了允许的最大内容长度
- sql-server - 在 SQL Server CTE 中添加 where 子句
- java - 带有 java 和 kotlin Function 参数的 Kotlin 2 方法(无法从 java 访问)
- python - 在python中将字符串转换为mysql的日期时间
- sql - 如何从oracle中删除多边形中的孔
- ansible - Ansible:使模板使用不同文件中定义的变量进行不同的运行
- excel - (VBA) 通过 TextStream 将 txt 文件作为 FileSystemObject 读取会引发错误
- c++ - 当指针在 cpp 17 中超出引用时,是否会调用非默认析构函数?
- c# - 修复链接错误,pdfHTML