前端通过表格数据导出excel

使用 xlsx 插件  npm install xlsx --save

使用 xlsx-style 插件  npm install xlsx-style --save

使用 file-saver 插件  npm install xlsx-style --save

import XLSX from "xlsx";

import FileSaver from "file-saver";

import XLSXStyle from "xlsx-style";

正文：

<template>

  <div>

    <el-table :data="tableData" style="width: 600px;" id="tableExcel">

      <el-table-column prop="date" label="日期"></el-table-column>

      <el-table-column prop="name" label="姓名"></el-table-column>

      <el-table-column prop="address" label="地址"></el-table-column>

    </el-table>

    <el-button style="margin-top:20px;" @click="exportBtn">导出</el-button>

  </div>

</template>

<script>

import XLSX from "xlsx";

import FileSaver from "file-saver";

import XLSXStyle from "xlsx-style";

export default {

  data() {

    return {

      tableData: [

        {

          date: "2016-05-02",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄"

        },

        {

          date: "2016-05-04",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1517 弄"

        },

        {

          date: "2016-05-01",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1519 弄"

        },

        {

          date: "2016-05-03",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1516 弄"

        }

      ]

    };

  },

  methods: {

    exportBtn() {

      if (this.tableData.length > 0) {

        let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式

        // 获取table的dom元素

        let vv = XLSX.utils.table_to_book(

          document.getElementById("tableExcel"),

          xlsxParam

        );

        let JIA = [{}, {}, {}];

        vv["Sheets"]["Sheet1"]["!cols"] = [];

        let vvs = vv["Sheets"]["Sheet1"];

        for (const key in vvs) {

          if (key.indexOf("!") === -1 && vvs[key].v) {

            vvs[key].s = {

              alignment: {

                horizontal: "center",

                vertical: "center",

                wrap_text: true

              }

            };

          }

        }

        JIA.forEach(item => {

          // excel表格的单元格宽度

          vv["Sheets"]["Sheet1"]["!cols"].push({ wpx: 200 });

        });

        let vbouts = XLSXStyle.write(vv, {

          bookType: "xlsx",

          bookSST: true,

          type: "buffer"

        });

        try {

          FileSaver.saveAs(

            // 这是下载的excel文件名

            new Blob([vbouts], { type: "application/octet-stream" }),

            "导出清单.xlsx"

          );

        } catch (e) {

          if (typeof console !== "undefined") console.log(e, vbouts);

        }

        return vbouts;

      } else {

        this.$message.error("当前数据为空，导出失败！");

      }

    }

  }

};

</script>

<style>

</style>