vue iview-admin table 導出excel

1、創建Blob.js和Export2Excel.js文件放到src文件夾下

2、npm中安裝三個依賴

npm install -S file-saver //用來生成文件的web應用程序

　npm install -S xlsx //電子表格格式的解析器

　npm install -D script-loader //將js掛在在全局下

　　

3、修改Export2Excel.js文件中的路徑（自己的路徑）

 

4、 在main.js中引入Blob.js和Export2Excel.js文件

import Blob from '@/excel/Blob.js'
import Export2Excel from '@/excel/Export2Excel.js'

　　

5、在vue組件中使用

<Button :size="buttonSize"
                          type="text"
                          icon="md-add"
                          @click="exportToExcel()">導出
                  </Button>

6、並且在該vue中 寫入exportToExcel方法

exportToExcel() {
        let me = this
        var tableData=me.$refs.table.tableData;
        var title=me.tableInfo.columns;
        var tHeader=[];　　//標題
        var tHeaderId=[];　　//id
        for(let i=0;i<title.length;i++){
            if(title[i].key!=null && title[i].key!="action"){
              tHeader.push(title[i].title);
              tHeaderId.push(title[i].key);
            }
        }
        var tableinfo=[];
        for(let n=0;n<tableData.length;n++){
          var obj={};
          for(let j=0;j<tHeaderId.length;j++){
            let id=tHeaderId[j];
            let value=tableData[n][tHeaderId[j]];
            obj[id]=value;
          }
          tableinfo.push(obj);
        }

        //excel數據導出
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../../../..//excel/Export2Excel');
          const excelTile="excel"+new Date().getTime();　　//文件名字
          const tHeaderTitle = tHeader;　　//列標題
          const filterVal = tHeaderId;　　//id
          const list = tableinfo;　　//整合得到的數據
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeaderTitle, data, excelTile);
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    },

 

 通過網上借鑒別人的，事實證明 簡單又實用