ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中报表的导出

2021-08-19 18:02:10  阅读:250  来源: 互联网

标签:XLSX vue 报表 导出 param field let forEach push


1.首先在终端中执行npm install xlsx

2.我们可以在一个公共的js文件中 import XLSX from 'xlsx'

3.

    /**      * 根据自定义数据导出excel      * @param headerName 数据表头名称 例:['年份', '全年(万元)', "更新时间"]      * @param fieldsKey 所需导出字段名称,需和表头一 一对应(字段名前面加*表示为日期时间字段,需要格式化) 例:['statisticsYear', 'worth', '*updateTime']      * @param dataSource 数据源(接口返回的列表数据) 例:[{"2021", "10000", "2021-06-28T11:40:12"},{"2020", "12000", "2020-06-28T11:40:12"}]      * @param fileName 导出文件名 例:年度产值      */

 exportExcelByField(headerName, fieldsKey, dataSource, fileName) {

        let tableData = [             headerName  //导出表头         ]; // 表格表头         let commonField = [];   // 普通字段         let specialField = [];  // 需要格式化的字段         fieldsKey.forEach(field => {             field.indexOf("*") === -1 ? commonField.push(field) : specialField.push(field.substr(1, field.length));         })
        dataSource.forEach(item => {             let rowData = []             commonField.forEach(field => {                 rowData.push(item[field]);             })
            specialField.forEach(field => {                 rowData.push(this.formatDate(item[field]))             })             tableData.push(rowData)         })         let ws = XLSX.utils.aoa_to_sheet(tableData)         let wb = XLSX.utils.book_new()         XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') // 工作簿名称         XLSX.writeFile(wb, fileName + '.xlsx') // 保存的文件名     },

标签:XLSX,vue,报表,导出,param,field,let,forEach,push
来源: https://www.cnblogs.com/ymhweb/p/15163067.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有