使用javascript下载页面中的表格数据
Posted yang_chuanlong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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
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 BOM
for (var i = 0; i < len; ++i)
charCode = str.charCodeAt(i);
// LE Bytes
byteArray.push(charCode & 0xff);
byteArray.push(charCode / 256 >>> 0);
return byteArray;
然后就可以使用开头的介绍的方法把数据下载到csv文件中了。
查看Demo
参考:
设置sep
以上是关于使用javascript下载页面中的表格数据的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript笔记--- JSON(对象的创建,访问对象属性等;eval函数;模拟将数据库中的信息打印在页面的表格中)
前端,Javascript中dataTable中,如何获取datatable中的columns的各项key:value值