vue实现表格数据导出

1、定义一个按钮(需要调整样式)

<div  @click="dowmTable()"> 导出</div>

3、引入excel需要的依赖(不同项目方式不同)

3.1、在package-lock.json文件中添加依赖

"xlsx": {
      "version": "0.16.9",
      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz",
      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
      "requires": {
        "adler-32": "~1.2.0",
        "cfb": "^1.1.4",
        "codepage": "~1.14.0",
        "commander": "~2.17.1",
        "crc-32": "~1.2.0",
        "exit-on-epipe": "~1.0.1",
        "fflate": "^0.3.8",
        "ssf": "~0.11.2",
        "wmf": "~1.0.1",
        "word": "~0.3.0"
      },

3.2、在需要用xlsx的文件引入

import XLSX from "xlsx";

4、导出方法（this.store_info数据是后端返回给前端的，遍历数据，写入excel）

methods: {
	dowmTable() {
        const data = this.store_info.map(item => ({
          总代理: item.agent,
          经销商名称: item.secDealerName,
          城市: item.city,
          地址: item.address,
          签约名称: item.contractName,
          联系人: item.contactsName,
          联系方式: item.contactsTel,
          总代理: item.agent,
          生效日期: item.effectiveDate,
          开始时间: item.effectiveStart,
          结束时间: item.effectiveEnd,
          授权编号: item.empowerNo,
          门店名称: item.storeName,
          门店省份: item.storeProvince,
        }));
        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 导出 Excel 文件
        XLSX.writeFile(workbook, '门店.xlsx');
      },
}