纯前端导出ecxel（用插件和不用插件[原生js]）

大家好，我是讯享网，很高兴认识大家。

一、用 js-export-excel插件实现

首先，npm安装插件

npm install -save js-export-excel

代码实现：

1. 引入插件

2. 定义导出的模板（表头、数据等）

3. 定义导出的文件名

讯享网

4. 导出成功

 //1. 导入插件 import ExportJsonExcel from 'js-export-excel';   //2. 提取方法 / * 导出档案为excel文件 */ exportJsonExcel = () => { const { dataSource } = this.state; //3. 定义表头，数据 let option = {}, tableData = [], tableTitle; tableTitle = ['姓名', '性别', '天气', '温度(℃)', '时间']; if(!dataSource || dataSource.length === 0){ notification.open({ message: '没有可供导出的信息', placement: 'bottomRight', icon: <Icon type="exclamation-circle" /> }); return; } dataSource.map((item) => { let objRow = { '姓名': item.personName, '性别': item.sex, '天气': item.sun, '温度(℃)': item.temperature, '时间': item.date, }; tableData.push(objRow); }); //4.下载的表格文件名 option.fileName = '信息' + (new Date()).getTime(); option.datas = [ { sheetName: 'Report', //名字(可有可无)(默认 sheet1) sheetData: tableData, //数据源 sheetHeader: tableTitle, //表头数据 sheetFilter: tableTitle, //表头数据对应的sheetData数据 } ]; let toExcel = new ExportJsonExcel(option); toExcel.saveExcel(); } //页面显示 <Button style={ 
  
    
  { float: 'left' }} onClick={this.exportJsonExcel}>导出</Button>

讯享网

二、用原生js实现（没有插件）

将table标签，包括tr、td等对json数据进行拼接，通过将json遍历将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html

代码实现：

1. 拼接json数据

2. 定义excel模板

3. 通过创建标签a实现（document）

讯享网  const jsonData = JSON.parse(JSON.stringify(data)); //data=[{},{},{}] 接口给的数据
  // 列标题
  let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
   // 循环遍历，每行加入tr标签，每个单元格加td标签
   for(let i = 0 ; i < jsonData.length ; i++ ){
       str+='<tr>';
       for(const key in jsonData[i]){
           // 增加\t为了不让表格显示科学计数法或者其他格式
           str+=`<td>${ jsonData[i][key] + '\t'}</td>`;     
        }
        str+='</tr>';
    }
   
    const worksheet = 'Sheet1';  // Worksheet名
    const uri = 'data:application/vnd.ms-excel;base64,';
    // 输出base64编码
    const base64 = (s : any) => window.btoa(unescape(encodeURIComponent(s)));

    // 下载的表格模板数据
    const 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>
        <meta http-equiv="Conten-Type" content="text/html;charset=utf-8">
        <!--[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>`;
      
        const link = document.createElement("a");
        link.href = uri + base64(template);  //下载模板
        link.download =  "数据表.xls";
        link.click();
    };
 

//导出.csv文件  (和excel文件差不多，就是不需要模板文件)

// 列标题，逗号隔开，每一个逗号就是隔开一个单元格
// let str = `姓名,电话,邮箱\n`;
        
// for(let i = 0 ; i < jsonData.length ; i++ ){
      // for(const key in jsonData[i]){
      // str+=`${jsonData[i][key] + '\t'},`;     // 增加\t为了不让表格显示科学计数法或者其他格式
      // }
      // str+='\n';
// }
        
// const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解决中文乱码
       
// const link = document.createElement("a"); // 通过创建a标签实现
// link.href = uri;
// link.download =  "json数据表.csv";
// link.click();

官方文档： js-export-excel - npm

纯前端导出ecxel（用插件和不用插件[原生js]）

一、用 js-export-excel插件实现

二、用原生js实现（没有插件）

相关推荐