zoukankan      html  css  js  c++  java
  • 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]))
          }
        },

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

  • 相关阅读:
    Jersey Politics
    网络流——最小费用最大流
    网络流——最大流Dinic算法
    【洛谷2756】飞行员配对方案问题(二分图匹配,网络流24题)
    状压dp入门
    2018九江市赛
    [CQOI2007]余数求和
    CSAPC2008 skyline
    [ZJOI2009]函数 题解
    由不定方程想到的——数论选讲
  • 原文地址:https://www.cnblogs.com/wcnwcn/p/11384256.html
Copyright © 2011-2022 走看看