在vue.js中导出Excel表格 几种方法(实测有用)

1、原来使用这个方法 （2020-10-23更新最近这个方法不知道为什么引入Blob.js报错，暂时我把这个方法废弃了，后面会添加其他方法可能跟自己配置的问题）

npm install -S file-saver xlsx
npm install -D script-loader

下载Blob.js和Export2Excel.js，在src目录下新建vendor文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

 

这个两个js文件文章最后

 

 

<el-button
                    type="primary"
                    @click="downlaodHandler"
                    :loading="downloadLoading"
                  >导出Excel表</el-button>

//导出excel
    async downlaodHandler() {
      let listData = await this.getTabaleList(); //拿到后台返回的数据
      this.downloadLoading = true;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        const tHeader = [
          "序号",
          "姓名",
          "性别",
          "上报类型",
          "上报时间",
          "职称",
          "手机号码",
          "学院",
          "规划表录入情况",
          "规划完成情况",
          "规划年份",
          "职业更新情况",
          "学院审核",
          "学校审核"
        ];
        const filterVal = [
          "id",
          "user_name",
          "gender",
          "ctype",
          "report_time",
          "job",
          "mobile",
          "org_name",
          "plan",
          "finished_rate",
          "plan_year",
          "updata",
          "college_re",
          "school_re"
        ];
        const data = this.formatJson(filterVal, listData);
        export_json_to_excel(tHeader, data, "职业规划统计表");
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "ctype") {
            return this.evaluation[v[j]].name;
          } else if (j === "finished_rate") {
            return v[j] + "%";
          } else if (j === "gender") {
            return v[j] === "1" ? "男" : "女";
          } else {
            return v[j];
          }
        })
      );
    },

 

2、使用a标签

<template>
  <section class="chart-container">
    <a
      href="javascript:;"
      id="download"
      style="background-color:#409EFF;color: #fff;padding: 12px 10px!important;margin-left: 10px!important;border-radius:4px "
      @click="download()"
      download="download.csv"
    >导出数据</a>
  </section>
</template>
<script>



export default {
  data() {
    return {
     
      tableData: [
        { date: "2011-10-02", name: "沈伟", address: "湖南省 邵阳市 邵东县" },
        { date: "1998-04-13", name: "萧娟", address: "吉林省 吉林市 舒兰市" },
        { date: "2011-03-01", name: "戴娜", address: "福建省 南平市 光泽县" },
        { date: "1980-09-16", name: "于洋", address: "台湾 宜兰县 三星乡" },
        { date: "2007-07-23", name: "陈秀兰", address: "陕西省 榆林市 靖边县" },
        { date: "2003-02-05", name: "汪秀英", address: "北京 北京市 昌平区" },
        { date: "2009-02-15", name: "袁敏", address: "贵州省 六盘水市 盘县" },
        { date: "2019-11-06", name: "黄艳", address: "山东省 聊城市 东昌府区" },
        { date: "1995-06-09", name: "万刚", address: "湖北省 咸宁市 通城县" },
        { date: "1980-10-23", name: "黎桂英", address: "广东省 珠海市 其它区" }
      ]
    };
  },
  
  created() {
    
  },
  methods: {
   
    // 导出
    download: function() {
      console.log("xiazai");
      var obj = document.getElementById("download");
      var str = "姓名,出生日期,地址\n";
      for (var i = 0; i < this.tableData.length; i++) {
        var item = this.tableData[i];
        str += item.name + "," + item.date + "," + item.address;
        str += "\n";
      }
      console.log(obj);
      str = encodeURIComponent(str);
      console.log(str);
      obj.href = "data:text/csv;charset=utf-8,\ufeff" + str;
      obj.download = "download.csv";
    }
  },
 
};
</script>
<style>

</style>

3.使用qf-export库导出表格excel

.1、安装 

npm install qf-export-excel

2、引入

const qee = require("qf-export-excel")
或者
import qee from "qf-export-excel"

3、绑定事件

<el-button type="primary"

                   @click="downlaodHandler">导出Excel表</el-button>

4、参数

这个库是个函数方法接收3个参数,分别是titleList dataSource fileName

titleList:这是标题的数据来源,是一个数组,每个值是个对象,对象中有两个属性,一个是title对应的是表格的表头文字,key是对应导出数据的key

 downlaodHandler () {
      var titleList = [
        { title: 'id', key: "id" },
        { title: '地址', key: "address" },
        { title: '日期', key: 'date' },
        { title: '金额', key: 'money' },
        { title: '状态', key: 'state' },
      ]
      var dataSource = this.tableData
      var fileName = "表格"
      qee(titleList, dataSource, fileName)
    },

fileName就是一个文件名 不传默认为'数据'文件名 

this.tableData= [
{address: "广东省东莞市长安镇"
date: "2019-11-1"
id: 1
money: 123
name: "张三"
state: "成功"},
]