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

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

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

1. 获取表格中文本内容。拼接成csv格式的字符串。如本例中最终拼接后的字符串应为: Name;Math;Physics;Chemistry; \n Melanie;100;80;90; \n Tomas …… 95.
2. 本机配置的csv分割符为”;”, 如果你的主机csv配置的csv分割符为”,”, 把”;”替换为”,”即可。
3. 使用拼接的字符串生成一个数组，传给Blob构造函数，生成一个blob对象。

4. 使用浏览器支持的方法把文件保存为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; ifor(let i=0, l=trs.length; ilet tds = trs[i].getElementsByTagName('td');for(let j=0, l2=tds.length; jvar 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 attributevar 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

Notes
1. 如果表格中数据全为Ascii字符的话，下载的csv文件用excel打开后，内容是正常显示的，但是如果有中文或者日文等utf8字符，用excel打开后会就会有乱码。解决方法就是添加BOM, 即获取要下载的字符后，在字符串前添加 \ufeff
如要下载的字符串为 str 添加BOM后则为 "\ufeff" + str。
2. 设置分隔符，一般来说csv文件的分隔符为逗号，但在有些国家默认分隔符为分号（分隔符可以通过控制面板来设置），为了让我们的代码具有通用性。我们可以在导出的字符串中设置一个固定的列分隔符， 在要导出的字符前添加 sep=;, 即可以让excel以;为列分隔符来打开我们下载的csv文件。
3. 如果上述两个条件都满足的话，我们就能使用excel在使用不同分隔符的区域打开我们下载的含有utf-8的文件，但遗憾的，BOM(\ufeff)和分隔符设置字符串(sep=;)，都必须放在文件的开头，即1和2无法同时满足。那么怎么办呢？，答案为： 添加BOM以满足条件1， 然后以utf-16小端编码我们要下载的字符串，再以制表符\t 作为列分隔符，那么excel就可以正常打开我们下载的文件了。代码如下：

var str = "中国 utf8 字符" + "\t" + "blabal";
var blob = new Blob([new Uint8Array(_toUtf16LE(str))], {type: "text/csv;charset=UTF-16;"});function _toUtf16LE (str) {var charCode, byteArray = [],len = str.length;byteArray.push(255, 254); // LE BOMfor (var i = 0; i < len; ++i) {charCode = str.charCodeAt(i);// LE BytesbyteArray.push(charCode & 0xff);byteArray.push(charCode / 256 >>> 0);}return byteArray;
}

然后就可以使用开头的介绍的方法把数据下载到csv文件中了。
查看Demo
参考：
设置sep

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！