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]))
      }
    },

 

 通过网上借鉴别人的，事实证明 简单又实用

转载于:https://www.cnblogs.com/wcnwcn/p/11384256.html