vue导出excel ------------ 多级表头

灰太狼 2023-01-10 15:54 250阅读 0赞

先装插件 不装没人救得了你

npm install xlsx --save

<template>
      <div>
        <el-table ref="report-table" :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="序号" width="150"> </el-table-column>
          <el-table-column label="名称">
            <el-table-column prop="name" label="风向" width="120">
            </el-table-column>
            <el-table-column prop="province" label="风速" width="120">
            </el-table-column>
            <el-table-column prop="city" label="温度" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
          </el-table-column>
        </el-table>
        <el-button @click="exportExcel('陈奎宁')">导出</el-button>
      </div>
    </template>
    
    <script>
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default { 
      data() { 
        return { 
          tableData: [
            { 
              date: "1",
              name: "15",
              province: "37",
              city: "156",
              address: "37市156金沙江路 1518 弄",
              zip: 200333,
            },
          ]
        };
      },
      methods: { 
        exportExcel(excelName) { 
          try { 
            const $e = this.$refs["report-table"].$el;
            let $table = $e.querySelector(".el-table__fixed");
            if (!$table) { 
              $table = $e;
            }
            const wb = XLSX.utils.table_to_book($table, {  raw: true });
            const wbout = XLSX.write(wb, { 
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            FileSaver.saveAs(
              new Blob([wbout], {  type: "application/octet-stream" }),
              `${ excelName}.xlsx`
            );
          } catch (e) { 
            if (typeof console !== "undefined") console.error(e);
          }
        },
      },
    };
    </script>
    <style>
    </style>