JS前端将table数据导出为EXCEL

转自:https://blog.csdn.net/ArchBaal/article/details/83662947
作者:archbaal
转载请注明出处

数据导出为Excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法,供大家使用。

1、ActiveXObject(“Excel.Application”)

这种方法只能在IE下使用。

优点:参照VBA控制excel对象。(代码不会的可以录制宏)

缺点:引用cell对象太慢,上万行数据导出时间超过2分钟

2、以Table方式导出为html文件。

3、以CSV方式导出。

使用中发现如果数据较多,上述第2、3中方法会失效,因此又整理了第4种方法。

第4种方法在IE10、chrome测试通过

<html>
<head>
  <div>以Table格式导为xls文件
  <button onclick='TableToExcel()'>导出button>div>
  <div>导出CSV文件
  <button onclick='toCSV()'>导出button>div>
  <div>大量数据导出CSV
  <button onclick='toLargerCSV()'>导出button>div>
head>
<body>
  <script>     
	//以Table格式导为xls文件
    function TableToExcel(){
      //要导出的json数据
      var jsonData = [
        {
          name:'001',
          id:'621699190001011231'
        },
        {
          name:'002',
          id:'52069919000101547X'
        },
        {
          name:'003',
          id:'423699190103015469'
        },
        {
          name:'004',
          id:'341655190105011749'
        }
      ]
	  //导出前要将json转成table格式
      //列标题
      var str = 'nameid';
      //具体数值 遍历
      for(let i = 0;i < jsonData.length;i++){
        str += '';
        for(let item in jsonData[i]){
			var cellvalue = jsonData[i][item];
            //不让表格显示科学计数法或者其他格式 
			//方法1 tr里面加 style="mso-number-format:'\@';" 方法2  是改为 = 'XXXX'格式  
			//如果纯数字且超过15位
			/*var reg = /^[0-9]+.?[0-9]*$/;
			if ((cellvalue.length>15) && (reg.test(cellvalue))){
				//cellvalue = '="' + cellvalue + '"';
			}*/
			//此处用`取代',具体用法搜索模板字符串 ES6特性
            str+=`${cellvalue}`;  
			// str+=`${cellvalue}`;  
        }
        str+='';		
      }	  	  
      var worksheet = '导出结果'
      var uri = 'data:application/vnd.ms-excel;base64,';
      //下载的表格模板数据
      var template = `
      
        ${str}
`
; //下载模板 function base64 (s) { return window.btoa(unescape(encodeURIComponent(s)))} window.location.href = uri + base64(template); } function toCSV(){ //要导出的json数据 var jsonData = [ { name:'001', id:'621699190001011231' }, { name:'002', id:'52069919000101547X' }, { name:'003', id:'423699190103015469' }, { name:'004', id:'341655190105011749' } ] //导出前要将json转成table格式 //列标题 var str = 'name,id\n'; //具体数值 遍历 for(let i = 0 ; i < jsonData.length ; i++ ){ for(let item in jsonData[i]){//增加\t为了不让表格显示科学计数法或者其他格式 //此处用`取代',具体用法搜索模板字符串 ES6特性 str+=`${jsonData[i][item] + '\t,'}`; } str+='\n'; } let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); var link = document.createElement("a"); link.href = uri; link.download = "导出.csv"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }function toLargerCSV(){ var str = '行号,内容,题目,标题\n';for(let i=0;i<100000;i++){ str += i.toString()+',1234567890123456789\t,张三李四王五赵六,bbbb,\n' } var blob = new Blob([str], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题 blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); object_url = window.URL.createObjectURL(blob); var link = document.createElement("a"); link.href = object_url; link.download = "导出.csv"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
script> body> html>

你可能感兴趣的:(javascript)