前端表格数据导出为 Excel 的简单方法

方法一

/**
 * 导出表格数据到 Excel 文件
 * @param {Array} tableData - 表格数据
 * @param {Array} fieldLabels - 表头组成的数组
 * @param {Array} fieldKeys - 列属性名组成的数组
 * @param {String} fileName - 导出的文件名
 */
function exportExcel(tableData, fieldLabels, fieldKeys, fileName) {
  let dataStr = fieldLabels.toString() + '\r\n';
  tableData.forEach(item => {
      fieldKeys.forEach(key => {
          // 加引号是为了使换行符在单元格内正常显示 
          dataStr += `"${item[key]}"\t,`;
      });
      dataStr += '\r\n';
  });
  
  // encodeURIComponent 解决中文乱码
  const url = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);
  const link = document.createElement("a");
  link.href = url;
  link.download = fileName + ".xls";
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); //释放标签
}

遇到的问题

• 为了让单元格中的数据不被转换格式（如 过大的数字会被转为科学技术法显示），需要在数据后面加多余的字符，如以上代码的 \t。

示例

const tableData = [
          { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '张小星', address: '上海市普陀区金沙江路 1517 弄' },
          { date: '2016-05-01', name: '刘小备', address: '上海市普陀区金沙江路 1519 弄' },
          { date: '2016-05-03', name: '赵小云', address: '上海市普陀区金沙江路 1516 弄' }
      ],
      fieldKeys = ['date', 'name', 'address'],
      fieldLabels = ['日期', '姓名', '地址'],
      fileName = '测试文件';
      
exportExcel(tableData, fieldLabels, fieldKeys, fileName);

方法二

通过 HTML 导出 EXCEL

function exportExcel(tableData, fieldKeys, fieldLabels, fileName){
    // 用于替换数据中的换行符，是其可以在单元格内正常显示
    const wrapMark = '
';
    
    // 设置单元格数据显示为文本格式，避免过大的数字以科学计数法的形式显示
    const tdTagHeader = ``;
    
    let dataStr = ''

    fieldLabels.forEach(label => {
      dataStr += `${tdTagHeader + label}`;
    })

    dataStr += '';
    tableData.forEach(item => {
        dataStr += ''
        fieldKeys.forEach(key => {
            // 这种方式本质是导出 html 文件，html 中连续的空格符会被合并成一个显示
            // replace(/ /g, ' ') 将空格符替换成   使其可以正常显示
            dataStr += tdTagHeader + `${item[key]}`.replace(/ /g, ' ').replace(/\n/g, wrapMark) + '';
        });
        dataStr += ''
    })

    //设置 Worksheet 名
    const workSheet = 'Sheet1'
    
    const template = `
    
    
    ${dataStr}`;

    const url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template))) ;
    const link = document.createElement("a");
    
    link.href = url;
    link.download = fileName + ".xls";
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

PS： 由于本质导出的是 HTML 文件，所以为 、 标签设置的内联样式也会在 Excel 中正确应用。

遇到的问题

• 导出的文件用 Office 打开时会提示文件格式与扩展名不匹配的提示，但并不影响文件的正常打开。