// 定义工作表的数据 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>