Vue3 导入导出Excel

2023-03-14 14:18:59
2024-07-21 16:50:42

安装

shell 复制代码
pnpm add -S XLSX

方法封装

js 复制代码
import * as XLSX from 'xlsx';

//参数说明
//configuration: {
//  data: [], // 导出的数据
//  head: {}, // 导出的数据对应的表头
//  name: '', // 导出的文件名
//  label: '', // 导出的表单名
//  widthArr: [], // 导出的表单列宽
//}

// 导出excel
export const ExportXlsx = (configuration) => {
  const { data, head, name, label, widthArr } = configuration;

  const list = data.map((item) => {
    const obj = {};
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k];
      }
    }
    return obj;
  });

  // 创建工作表
  const xLSXData = XLSX.utils.json_to_sheet(list);
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, xLSXData, label);
  xLSXData['!cols'] = [];
  // 设置列宽
  widthArr.forEach((item) => {
    xLSXData['!cols'].push({ wpx: item });
  });

  // 生成文件并下载
  XLSX.writeFile(wb, `${name}.xlsx`);
};

// 导入excel
export const ImportXlsx = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = (e) => {
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: 'binary', cellDates: true });
    const wsname = workbook.SheetNames[0];
    const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
    console.log(outdata);
  };
};
目录
暂无评论,欢迎留下你的评论

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额