前端导出xlsx文件

1、安装xlsx

npm install xlsx

2、封装导出函数

// import * as XLSX from 'xlsx';
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、使用

import {exportExcel} from '@/utils/exportExcel.js'
handleExportExcel() {
// 字段 title,key 需要一一对应
const params = {
        title: ['名称','年龄'],
        key: ['name','age'],
        data:arr, // 数据源
        autoWidth: true, //autoWidth等于true,那么列的宽度会适应那一列最长的值
        filename: '',  // 文件名自己定义
      };
    exportExcel(params) ;
}
  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值