Vue/JS通过返回的数据，前端自己进行表格下载，下载xlxs表格

使用到的插件

# 安装 XLSX 库
npm install xlsx --save

# 如果需要样式支持，安装 xlsx-style 扩展
npm install xlsx-style --save

# 若要保存生成的 Excel 文件至客户端电脑，安装 file-saver 库
npm install file-saver --save

安装完成后在模块中按需导入这些库：

// 引入 XLSX 库
import * as XLSX from 'xlsx';

// 如果需要样式支持，引入 xlsx-style
import * as XLSX_STYLE from 'xlsx-style';

// 引入 file-saver 用于保存文件
import { saveAs } from 'file-saver';

引入xlsx-style会报错找不到xlsx-style的包

解决方法

方法一：直接修改

\node_modules\xlsx-style\dist\cpexcel.js  的源码 807行
var cpt = require('./cpt' + 'able');  改为   var cpt = cptable;

方法二：全局修改

vue.config.js 文件中增加如下代码

module.exports = {
   configureWebpack(){
    return{
        externals: [ {
             './cptable': 'var cptable'
        }]
    }
  }
}

页面代码

<template>
    <el-button @click="exportPayroll" size="small">导出数据</el-button>
</template>

下载执行代码复制可以直接使用

exportPayroll() {
    let obj={difference:"1"}
    obj = JSON.stringify(obj);
    exportPayroll(obj).then((res) => {
        if(res.data.code =='0'){
             const tableList=res.data.data;
                //return 里面的格式对应为 '表格里面对应的字段'：返回结果里面对应的属性名
                const data = tableList.map(item => {
                return {
                  '项目名称': item.bab062,
                  '年月': item.aae149,
                  '姓名': item.aac003,
                  '班组名称': item.bac502?item.bac502:"" , //为非必填 如果值为null建议赋值为空，不然打印到表格里面会出现null字眼
                  '实发时间': item.aae036?item.aae036:"",
                  '状态': item.bac322s,
                  '备注': item.aae013?item.aae013:"",
                }
              });
              // 定义表头样式
              const headerStyle = {
                fill: {
                  fgColor: { rgb: '0070C0' },
                },
                font: {
                  color: { rgb: 'FFFFFF' },
                  name: 'Calibri',
                  sz: 11,
                },
                border: {
                  top: { style: 'thin', color: { rgb: '000000' } },
                  bottom: { style: 'thin', color: { rgb: '000000' } },
                  left: { style: 'thin', color: { rgb: '000000' } },
                  right: { style: 'thin', color: { rgb: '000000' } },
                },
              };
              const contentStyle = {
                font: {
                  name: 'Calibri',
                  sz: 11,
                },
                border: {
                  top: { style: 'thin', color: { rgb: '000000' } },
                  bottom: { style: 'thin', color: { rgb: '000000' } },
                  left: { style: 'thin', color: { rgb: '000000' } },
                  right: { style: 'thin', color: { rgb: '000000' } },
                },
              };
              const worksheet = XLSX.utils.json_to_sheet(data);
             
              // 将表头样式应用到 worksheet 对象中的表头单元格
              const headerRange = XLSX.utils.decode_range(worksheet['!ref']);
              for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
                const headerCell = XLSX.utils.encode_cell({ r: headerRange.s.r, c: col });
                worksheet[headerCell].s = headerStyle;
              }
               //定义表格每列的列宽度为20个字符长度
              for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
                // 初始化worksheet['!cols']数组，如果尚未定义
                if (!Array.isArray(worksheet['!cols'])) {
                  worksheet['!cols'] = [];
                }
                // 添加列宽信息
                worksheet['!cols'][col - 1] = { wch: 20 }; // 注意数组索引是从0开始的
              }
              // 将内容样式应用到 worksheet 对象中的所有单元格
              const contentRange = XLSX.utils.decode_range(worksheet['!ref']);
              for (let row = contentRange.s.r + 1; row <= contentRange.e.r; row++) {
                for (let col = contentRange.s.c; col <= contentRange.e.c; col++) {
                  const contentCell = XLSX.utils.encode_cell({ r: row, c: col });
                  worksheet[contentCell].s = contentStyle;
                }
              }
              const workbook = XLSX.utils.book_new();
              XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
              // 将 workbook 对象转换为二进制数据流并下载
              const wbout = XLSX_STYLE.write(workbook, { bookType: 'xlsx', type: 'binary' });
              const blob = new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' });
              
              saveAs(blob, '表格名字.xlsx');
        }
    })
},
s2ab(s) {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xFF;
      }
      return buf;
    },

结果如下