Excel表格下载模板和分析

模板下载

// 定义工作表的数据
      let data = manage_list.value
      let newArray = data.map((item, index) => {
            if (index === 0) {
              return ['DM1'];
            } else {
              return [item];
            }
          });
    // 定义工作表的数据
    const ws_data = [
      ['DM','2024指标（百万元）','DM指标占比（%）','公司/市场部会议','大区会','科室会','KA医院活动','地区总费用（百万元）'],// 表头
      // 数据行
      ...newArray,
      ["大区总和"]
      // ... 更多数据行
      ];
    
      // 创建工作表
      const ws = XLSX.utils.aoa_to_sheet(ws_data);
    
      // 创建工作簿并添加工作表
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    
      // 导出工作簿（这里默认导出为xlsx格式）
      XLSX.writeFile(wb, "地区DM活动费用分配模板.xlsx");

模板分析

//Excel导入
let jsonData = [];//数据
// 在上传文件之前可以进行一些检查，比如文件类型等
const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
  console.log(isExcel,'isExcel');
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件!');
  }
  return isExcel;
};
// 处理文件改变事件
let upLoad = async function (event, fileList) {
  console.log('event',event.raw);
  const files = event.raw;
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: 'binary' });// binary获取的数据类型为[{},{},{}]
    const firstSheetName = workbook.SheetNames[0];//第一个sheet 名字
    const worksheet = workbook.Sheets[firstSheetName];//第一个sheet中的数据
    jsonData = XLSX.utils.sheet_to_json(worksheet);//把表中的数据转换为JSON
    console.log('jsonData',jsonData);
    excelIn(jsonData);
  };
  await reader.readAsArrayBuffer(files);
};

简单介绍

        以上方法是在vue3 setup语法糖中实现的，包含了excel文件的上传分析和模板下载，通过这种方式，可以自己设置用户使用的excel模板，分析用户上传的excel文件，并把获取到的表格数据渲染到页面中。

使用方法

        在vue中使用，需要下载XLSX模块

npm i xlsx

         在页面中引入模块

  import * as XLSX from 'xlsx';

        在原生js中引入

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>