vue导出数据为Excel文件

vue导出数据为Excel文件

首先下载依赖

npm install xlsx file-saver --save

然后在src文件夹里面创建一个utils文件夹

在utils文件夹内创建Excel.js文件

把以下代码直接帖进去

import FileSaver from "file-saver";
import * as XLSX from "xlsx/xlsx.mjs";
export default {
  // 导出Excel表格
  exportExcel(name, tableName) {
    //name表示生成excel的文件名     tableName表示表格的id
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName));
    var selIn = XLSX.write(sel, {
      bookType: "xlsx",
      bookSST: true,
      type: "array",
    });
    try {
      FileSaver.saveAs(
        new Blob([selIn], { type: "application/octet-stream" }),
        name
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, selIn);
    }
    return selIn;
  },
};

在main.js中进行全局引入

//全局导出excel
import htmlToExcel from “./utils/Excel”; //刚刚写好的那个js文件的路径
Vue.prototype.Excels = htmlToExcel;

最后就是运用到页面中

 methods: {
    exportExcel() {
    
      this.Excels.exportExcel("本月数据报表.xlsx", "#excel");  //此括号里面（第一个是导出文件的名称，第二个是需要导出的标签的id）
    },
  },

以下为例

<template>
  <div class="">
    <el-button
      type="primary"
      title=""
      icon="el-icon-bottom"
      @click="exportExcel"
      >导出为Execl</el-button
    >
    <el-table :data="tableData" style="width: 100%" id="excel">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
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 弄",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    exportExcel() {
      this.Excels.exportExcel("本月数据报表.xlsx", "#excel");
    },
  },
  components: {},
  computed: {},
};
</script>

<style lang="scss" scoped></style>