JS前端--数据导出为EXCEL（支持大量数据导出）

最新推荐文章于 2024-04-18 14:03:10 发布

骊山大粽子

最新推荐文章于 2024-04-18 14:03:10 发布

阅读量1.3w

点赞数 4

分类专栏： js 文章标签： js excel 导出

本文链接：https://blog.csdn.net/archbaal/article/details/83662947

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法，供大家使用。
1、ActiveXObject(“Excel.Application”)
这种方法只能在IE下使用。
优点：参照VBA控制excel对象。（代码不会的可以录制宏）
缺点：引用cell对象太慢，上万行数据导出时间超过2分钟
2、以Table方式导出为html文件。
3、以CSV方式导出。
使用中发现如果数据较多，上述第2、3中方法会失效，因此又整理了第4种方法 toLargerCSV。

第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 = '<tr><td>name</td><td>id</td></tr>';
      //具体数值 遍历
      for(let i = 0;i < jsonData.length;i++){
        str += '<tr>';
        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+=`<td style="mso-number-format:'\@';">${cellvalue}</td>`;  
			// str+=`<td>${cellvalue}</td>`;  
        }
        str+='</tr>';		
      }	  	  
      var worksheet = '导出结果'
      var uri = 'data:application/vnd.ms-excel;base64,';
      //下载的表格模板数据
      var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
      //下载模板
	  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);
	}
	//支持大批量数据导出，目前测试15万行 30列通过，导出时间约为6秒
	function toLargerCSV(){
	//CSV格式可以自己设定，适用MySQL导入或者excel打开。
	//由于Excel单元格对于数字只支持15位，且首位为0会舍弃 建议用 =“数值” 
	
		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>

骊山大粽子

关注

4
点赞
踩
43

收藏

觉得还不错? 一键收藏
24
评论
JS前端--数据导出为EXCEL（支持大量数据导出）

数据导出为excel是前端比较常用的功能。笔者近期在网上收集汇总了几种常用的方法，供大家使用。1、ActiveXObject(“Excel.Application”)这种方法只能在IE下使用。优点：参照VBA控制excel对象。（代码不会的可以录制宏）缺点：引用cell对象太慢，上万行数据导出时间超过2分钟2、以Table方式导出为html文件。3、以CSV方式导出。使用中发现如果数...
复制链接

扫一扫