快捷導(dǎo)航

js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL（支持大量數(shù)據(jù)導(dǎo)出）

更新時(shí)間：2020年03月31日 16:06:44 作者：驪山大粽子

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL，支持大量數(shù)據(jù)導(dǎo)出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

數(shù)據(jù)導(dǎo)出為excel是前端比較常用的功能。筆者近期在網(wǎng)上收集匯總了幾種常用的方法，供大家使用。

1、ActiveXObject(“Excel.Application”)

這種方法只能在IE下使用。
優(yōu)點(diǎn)：參照VBA控制excel對(duì)象。（代碼不會(huì)的可以錄制宏）
缺點(diǎn)：引用cell對(duì)象太慢，上萬行數(shù)據(jù)導(dǎo)出時(shí)間超過2分鐘

2、以Table方式導(dǎo)出為html文件。

3、以CSV方式導(dǎo)出。

使用中發(fā)現(xiàn)如果數(shù)據(jù)較多，上述第2、3中方法會(huì)失效，因此又整理了第4種方法 toLargerCSV。

第4種方法在IE10、chrome測(cè)試通過

<html>
<head>
 <div>以Table格式導(dǎo)為xls文件
 <button onclick='TableToExcel()'>導(dǎo)出</button></div>
 <div>導(dǎo)出CSV文件
 <button onclick='toCSV()'>導(dǎo)出</button></div>
 <div>大量數(shù)據(jù)導(dǎo)出CSV
 <button onclick='toLargerCSV()'>導(dǎo)出</button></div>
</head>
<body>
 <script>   
 //以Table格式導(dǎo)為xls文件
  function TableToExcel(){
   //要導(dǎo)出的json數(shù)據(jù)
   var jsonData = [
    {
     name:'001',
     id:'621699190001011231'
    },
    {
     name:'002',
     id:'52069919000101547X'
    },
    {
     name:'003',
     id:'423699190103015469'
    },
    {
     name:'004',
     id:'341655190105011749'
    }
   ]
  //導(dǎo)出前要將json轉(zhuǎn)成table格式
   //列標(biāo)題
   var str = '<tr><td>name</td><td>id</td></tr>';
   //具體數(shù)值 遍歷
   for(let i = 0;i < jsonData.length;i++){
    str += '<tr>';
    for(let item in jsonData[i]){
  var cellvalue = jsonData[i][item];
      //不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式 
  //方法1 tr里面加 style="mso-number-format:'\@';" 方法2 是改為 = 'XXXX'格式 
  //如果純數(shù)字且超過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 = '導(dǎo)出結(jié)果'
   var uri = 'data:application/vnd.ms-excel;base64,';
   //下載的表格模板數(shù)據(jù)
   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(){
 //要導(dǎo)出的json數(shù)據(jù)
   var jsonData = [
    {
     name:'001',
     id:'621699190001011231'
    },
    {
     name:'002',
     id:'52069919000101547X'
    },
    {
     name:'003',
     id:'423699190103015469'
    },
    {
     name:'004',
     id:'341655190105011749'
    }
   ]
  //導(dǎo)出前要將json轉(zhuǎn)成table格式
   //列標(biāo)題
   var str = 'name,id\n';
   //具體數(shù)值 遍歷
   for(let i = 0 ; i < jsonData.length ; i++ ){
    for(let item in jsonData[i]){
  
      //增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
  //此處用`取代'，具體用法搜索模板字符串 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 = "導(dǎo)出.csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 }
 //支持大批量數(shù)據(jù)導(dǎo)出，目前測(cè)試15萬行 30列通過，導(dǎo)出時(shí)間約為6秒
 function toLargerCSV(){
 //CSV格式可以自己設(shè)定，適用MySQL導(dǎo)入或者excel打開。
 //由于Excel單元格對(duì)于數(shù)字只支持15位，且首位為0會(huì)舍棄 建議用 =“數(shù)值” 
 
 var str = '行號(hào),內(nèi)容,題目,標(biāo)題\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 = "導(dǎo)出.csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);        
 }

</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: