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

一车鸡蛋

已于 2023-06-06 19:56:24 修改

阅读量3.7k

点赞数 3

文章标签： javascript react.js 前端 ecmascript

于 2022-04-21 19:37:58 首次发布

本文链接：https://blog.csdn.net/Realizee/article/details/124329288

版权

一般的，下载excel是后端放到服务器上，然后读取文件流，然后给接口，前端直接就下载。
但是，我们纯大前端来实现也可，这里用有插件也有不用插件的，都是好用的。

一、用 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