vue3表格导出excel

最新推荐文章于 2024-02-20 11:02:37 发布

燕京拾亿

最新推荐文章于 2024-02-20 11:02:37 发布

阅读量1.2k

点赞数 1

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_59074147/article/details/128645897

版权

- 下载依赖

npm install xlsx

- 引入依赖

import * as XLSX from "xlsx";

- 使用

<button @click="exportExcel">导出excel</button>

// 导出excel的方法
const exportExcel = () => {
//   截取需要的数据（这里只需要接口返回数据中的部分数据，所以我专门截取了一下）
  let list = state.dataAll.data.map(
    ({ serviceName, serviceType, serviceIp, servicePort }) => {
      return { serviceName, serviceType, serviceIp, servicePort };
    }
  );
  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new();
  // 创建一个新的工作表
  const worksheet = XLSX.utils.json_to_sheet(list);
  // 将工作表附加到工作簿，并将工作表命名为students
  XLSX.utils.book_append_sheet(workbook, worksheet, "students");
  // 改变列的宽度
  worksheet["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
  // 向woeksheet工作表中的A1位置添加数据的数组（这是替换原有属性名）
  XLSX.utils.sheet_add_aoa(
    worksheet,
    [["资产名称", "资产类型", "IP地址", "端口"]],
    { origin: "A1" }
  );
  // 导出工作簿，并命名导出文件名为Presidents.xlsx
  XLSX.writeFile(workbook, "Presidents.xlsx");
};