JS 导出 EXCEL

JS 导出 EXCEL

前言

在我们开发项目的过程中,应该都会遇到 excel 导出功能。那么现在我对 excel 导出方法做如下的记录,方便以后查看,并且分享给大家。

一、纯 JS 导出 EXCEL

我们在开发过程中,或多或少会遇到不需要调用接口来导出 EXCEL 的情况,那么可以参照如下代码,实现前端纯 JS 导出 EXCEL。

export function tableToExcel(jsonData, fileName) {
  let str = '';
  //循环遍历,每行加入tr标签,每个单元格加td标签
  for (let i = 0; i < jsonData.length; i++) {
    // 数据列标题
    if (i === 0) {
      str += '<tr>';
      for (let item in jsonData[i]) {
        //增加\t为了不让表格显示科学计数法或者其他格式
        str += `<td>${item + '\t'}</td>`;
      }
      str += '</tr>';
    }
    // 数据内容
    str += '<tr>';
    for (let item in jsonData[i]) {
      //增加\t为了不让表格显示科学计数法或者其他格式
      str += `<td>${jsonData[i][item] + '\t'}</td>`;
    }
    str += '</tr>';
  }
  // Worksheet名
  let worksheet = 'Sheet1';
  let uri = 'data:application/vnd.ms-excel;base64,';

  // 下载的表格模板数据
  let 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>`;
        
        
  // 直接下载(此方法不能自定义文件名)
  // window.location.href = uri + base64(template)

  // 通过创建a标签下载(此方法可以自定义文件名)
  let a = document.createElement('a');
  a.href = uri + base64(template);
  a.download = `${fileName}_${new Date().toLocaleString()}.xlsx`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);


}

// 输出base64编码
function base64(s) {
  return window.btoa(unescape(encodeURIComponent(s)))
}

二、通过接口导出 EXCEL

当我们的导出数据需要从后端获取时,可以通过如下方式进行导出。
本例使用了 axios 请求服务端数据,如过是其他方式类似,请看如下代码:

exportExcel(url, data, fileName) {
    return axios({
      url: url,
      baseURL: baseApi,
      method: 'post',
      data: JSON.stringify(data),
      responseType: 'blob',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'content-type': 'application/json; charset=utf-8'
      }
    }).then((res) => {
      if (res.status === 200) {
        let tempBlob = new Blob([res.data, {type :'application/vnd.ms-excel:charset=utf-8'}]);
        let targetUrl = window.URL.createObjectURL(tempBlob);
        let a = document.createElement('a');
        a.href = targetUrl;
        a.download = `${fileName}_${new Date().toLocaleString()}.xlsx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        console.log("请求资源失败")
      }
    }).catch(e=>console.log(e))
  },