Vue table export excel

First install two dependencies, 

1 npm install -S file-saver xlsx

2  npm install -D script-loader

Create a new folder vendor (optional name) in the project src directory, and place two files Blob.js and Export2Excal.js in this folder (download address: http://files.cnblogs.com/files/wangyunhui/vendor .rar )

 

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

　　

:tebleDateAll /:tebleDate table body part :tebleTop table header part

The data format is


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"]

　　

method in vue component

 

export default {
  data() {
    return {
      excelTitle:"New file" // file name
    };
  },

 
  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 = (the corresponding property name in list);
        const list = this.tebleDate;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.excelTitle);
      });
    }
}
  }
};

　　

Add a click event to activate the form

 

 

 

<button @click="export2Excel">Confirm export</button>