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

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

  • 相关阅读:
    创建表空间tablespace,删除
    oracle表分区的,分区操作,分区查询,子分区查询
    oracle表分区创建
    git代码提交步骤,教程
    Spring整合Quartz实现动态定时器,相关api,定时器添加,删除,修改
    spring + quartz定时任务,以及修改定时任务
    oracle表分区详解
    Navicat for Oracle 绿色版 连接 Oracle 12c
    spring 整合maven 定时任务调度,多个任务写法
    Unity3D 之UGUI制小地图
  • 原文地址:https://www.cnblogs.com/wcnwcn/p/11384256.html
Copyright © 2020-2023  润新知