使用vue3框架vue-next-admin导出列表数据

在 Vue3 中实现 Excel 导出功能可以通过以下步骤完成，这里使用 xlsx 库来实现前端 Excel 导出：
1. 安装依赖

npm install xlsx file-saver
# 或
yarn add xlsx file-saver

2. 实现代码示例
需要在当前页引入

import * as XLSX from "xlsx";

注释：我导出的数据为列表的全部数据（datum）；
自定义我需要的表头，大家可以根据自己的需要进行替换。
还可以只导出当前页的数据，可以根据分页进行数据划分。
这个方法图片导出是url的路径，不是当前的图片。

// 导出
import * as XLSX from "xlsx";
// 导出框显示
const datum = ref([]);
// 导出全部数据的函数
// 导出全部数据的函数
const exportBtn = () => {
  // 获取全部的数据
  const currentPageData = datum.value;

  // 处理表格中的格式化内容
  const exportData = currentPageData.map((row, index) => ({
    序号: (currentPage4.value - 1) * pageSize4.value + index + 1, // 序号
    公司名称: row.title, // 公司名称
    商家门头照: row.img, // 商家门头照（直接导出图片URL）
    手续费: row.proce_money,
    手续费比例: row.procedure_ratio,
    分账金额: row.split_money,
    分账比例: row.then_ratio,
    应得: row.must_money,
    银行卡号: row.card, // 银行卡号
    价格: row.money, // 价格
    状态: row.state === 0 ? "未分账" : row.state === 1 ? "已分账" : "未知类型", // 类型
    创建时间: row.create_time, // 创建时间
  }));

  // 定义表头
  const headers = [
    "序号",
    "公司名称",
    "商家门头照",
    "手续费",
    "手续费比例",
    "分账金额",
    "分账比例",
    "应得",
    "银行卡号",
    "价格",
    "状态",
    "创建时间",
  ];

  // 创建工作簿
  const wb = XLSX.utils.book_new();

  // 将数据和表头转换为工作表
  const ws = XLSX.utils.json_to_sheet(exportData, { header: headers });

  // 计算每列的最大宽度
  const maxwidth = function (sheet, idx) {
    let max = 0;
    const range = sheet["!ref"];
    if (range) {
      const rowCount = parseInt(range.split(":")[1].replace(/[A-Za-z]/g, ""));
      for (let row = 0; row <= rowCount; ++row) {
        const cell_ref = XLSX.utils.encode_cell({ c: idx, r: row });
        const cell = sheet[cell_ref];
        if (cell && cell.v) {
          max = Math.max(max, String(cell.v).length);
        }
      }
    }
    return max;
  };

  // 定义列宽数组
  const wscols = [];
  headers.forEach((header, idx) => {
    wscols.push({ wch: maxwidth(ws, idx) + 2 }); // 给列宽加点余量
  });

  // 设置工作表的列宽
  ws["!cols"] = wscols;

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "分账数据");

  // 导出 Excel 文件
  XLSX.writeFile(wb, "分账数据.xlsx");

  // 显示成功消息
  ElMessage({
    type: "success",
    message: "全部导出成功",
  });
};

 3. 关键代码解释
 

数据转换
utils.json_to_sheet(data) 将 JSON 数据转换为 Excel 工作表格式。

工作簿操作

utils.book_new() 创建新工作簿。
utils.book_append_sheet(workbook, worksheet, 'Sheet1') 将工作表添加到工作簿。
文件导出

writeFile(workbook, filename) 是 xlsx 提供的一键导出方法。
如果需要更精细控制（如自定义 Blob），可以使用 write 方法生成二进制数据，再结合 file-saver 保存。