vue（十七）：导出表格数据

最新推荐文章于 2024-08-06 14:48:00 发布

半夏ing

最新推荐文章于 2024-08-06 14:48:00 发布

阅读量704

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Fiona_lms/article/details/102569865

版权

vue 专栏收录该内容

44 篇文章

订阅专栏

其实这种文章，网上一堆，但是我每次写的时候，容易忘，还得百度一下，所以在此记录一下

第一步：安装三个依赖包

cnpm install  file-saver
cnpm install xlsx
cnpm install script-loader

第二步：项目中创建一个新的文件夹用于存放Blob和Export2Excel两个js文件
在这里插入图片描述
第三步：写入公共的函数里面common.js

const export2Excel = function(tHeader,list,tableData,excelName){
    require.ensure([], () => {
        const { export_json_to_excel } = require('./vendor/Export2Excel');
        let filterVal = list;//字段
        const data = tableData.map(v => filterVal.map(j => v[j]))
        export_json_to_excel(tHeader, data, excelName);
    })
}

export  default {export2Excel}

第四步：引用并导出数据

  //数据导出
        exportData(){
            let info = {from: 0,size: this.pageSize};
            let tHeader = ["序号","企业全称",'企业简称','有效账号数','查询总次数','查询成功数','查询成功率','监控次数','消费总金额（元）','充值总金额（元）','金额(元)'];
            let list = ['index','enterpriseName','simpleName','periodAccount','queryTotal','querySuccess','querySuccessRate','monitorNumber','consumpteMoney','rechargeMoney','money'];
            this.common.export2Excel(tHeader,list,this.tableData,'账单列表');
        },

over了