纯前端导出xlsx文件（自动适配文字宽度）

结果演示

1.安装xlsx插件。

yarn add xlsx  

2.export.js文件封装导出函数。

function jsonToArray (key, jsonData) {
  return jsonData.map(v =>
    key.map(j => {
      return v[j];
    })
  );
}

function autoWidthFunc (ws, data) {
  // set worksheet max width per col
  const colWidth = data.map(row =>
    row.map(val => {
      // if null/undefined
      if (val == null) {
        return { wch: 10 };
      } else if (val.toString().charCodeAt(0) > 255) {
        // if chinese
        return { wch: val.toString().length * 2 };
      } else {
        return { wch: val.toString().length };
      }
    })
  );
  // start in the first row
  const result = colWidth[0];
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j].wch < colWidth[i][j].wch) {
        result[j].wch = colWidth[i][j].wch;
      }
    }
  }
  ws['!cols'] = result;
}

const exportExcel = ({ key, data, title, filename, autoWidth }) => {
  import('xlsx').then(XLSX => {
    const wb = XLSX.utils.book_new();
    data.forEach(item => {
      const arr = jsonToArray(key, item.sheetData);
      arr.unshift(title);
      const ws = XLSX.utils.aoa_to_sheet(arr);
      if (autoWidth) {
        autoWidthFunc(ws, arr);
      }
      XLSX.utils.book_append_sheet(wb, ws, item.sheetName);
    });
    XLSX.writeFile(wb, filename + '.xlsx');
  });
};

export default exportExcel;

3.触发导出事件，传入参数。

  exportCheckList () {
      const arr = [
        {
          sheetName: 'ss',
          sheetData: this.designCostCheckTableData
        },
        {
          sheetName: 'ss1',
          sheetData: this.designCostCheckTableData
        }
      ];
      const params = {
        // dataList中的字段 title,key 需要一一对应
        title: Object.values(checkListDictionary),
        key: Object.keys(checkListDictionary),
        data: arr, // 数据源
        autoWidth: true,
        // 时间戳函数自己定义formatDate
        filename: '清单'
      };
      exportExcel(params);
    }