vue 表格导出excel

首先要install两个依赖， 

1 npm install -S file-saver xlsx

2  npm install -D script-loader

在项目src目录下新建一个文件夹vendor（名字随意），在此文件夹下放置两个文件Blob.js和Export2Excal.js（下载地址：https://files.cnblogs.com/files/wangyunhui/vendor.rar）

 

 <export2Excel v-if="export2Excelshow" @closeExce = "export2Excelshow=false" :tebleDateAll= "tebleDateAll" :tebleDate= "tebleDate" :tebleTop="tebleTop"></export2Excel>

　　

:tebleDateAll /:tebleDate  表格主体部分          :tebleTop  表格的标题部分

数据格式为


tebleDate：[
{n1:"n1",n2:"n2",n3:"n3",n4:"n4",n5:"n5",n6:"n6"},
{n1:"n1",n2:"n2",n3:"n3",n4:"n4",n5:"n5",n6:"n6"}
]



tebleTop:["n1","n2","n3","n4","n5","n6"]

　　

vue 组件内方法

 

export default {
  data() {
    return {
      excelTitle:"新建文件" // 文件名称
    };
  },

 
  props:["tebleDateAll","tebleDate","tebleTop"],
  methods: {

export2Excel() {

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
   

     require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = this.tebleTop
        const filterVal = （list 中对应的属性名称）;
        const list = this.tebleDate;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.excelTitle);
      });
    }
}
  }
};

　　

增加一个点击事件 ，激活表格

 

 

 

<button @click="export2Excel">确认导出</button>