使用javascript下载页面中的表格数据

以前要下载web页面中的数据要依靠sever端，现在使用Blob等较新技术可以直接使用javascript把页面表格中的数据下载下来，本篇主要讲述把表格数据下载为csv文件。



例如我们想要把上面表格中的数据下载为csv文件，步骤如下

获取表格中文本内容。拼接成csv格式的字符串。如本例中最终拼接后的字符串应为: Name;Math;Physics;Chemistry; \n Melanie;100;80;90; \n Tomas …… 95.

本机配置的csv分割符为”;”, 如果你的主机csv配置的csv分割符为”,”, 把”;”替换为”,”即可。

使用拼接的字符串生成一个数组，传给Blob构造函数，生成一个blob对象。

使用浏览器支持的方法把文件保存为csv文件， IE10+可以navigator.msSaveBlob, 火狐或Chrome可以使用URL.createObjectUrl和 a 标签（通过设置其download属性）联合使用来保存csv文件

代码如下：

var columnDelimiter = ";"; //列分割符
var lineDelimiter = "\n";  //行分割符
function downloadTable(tableId, fileName) {
var scoreTable = document.getElementById(tableId);
var head = scoreTable.tHead;
var ths = head.getElementsByTagName('th');
var trs = scoreTable.tBodies[0].getElementsByTagName('tr');

var result = '';
for(let i=0,l=ths.length; i<l; i++){
result += ths[i].innerHTML + columnDelimiter;
}
result += lineDelimiter;

for(let i=0, l=trs.length; i<l; i++){
let tds = trs[i].getElementsByTagName('td');
for(let j=0, l2=tds.length; j<l2; j++){
result += tds[j].innerHTML + columnDelimiter;
}
result += lineDelimiter;
}
var blob = new Blob([result], {type: 'text/csv;charset=utf-8;'});
var downloadLink = document.createElement("a");
if ('download' in downloadLink) { // feature detection, Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = fileName;
downloadLink.hidden = true;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}else{
if(navigator.msSaveBlob){ //IE10+
navigator.msSaveBlob(blob, fileName);
}
}
}

downloadTable('score', 'score.csv'); //保存csv文件

想查看demo, 请点击这里

支持IE10+及较新版本的火狐和Chrome