VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

简介: VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

导出excel自定义表头及自定义字段步骤:

1.安装依赖

npm install --save xlsx file-saver
npm install -D script-loader

2.下载Blob.js、export2Excel.js
百度网盘链接:https://pan.baidu.com/s/1iC1kWX5jd7U5J9g_L4BQ2Q
提取码: 3kv4
src下创建excel文件夹将Blob.js、export2Excel.js放入
3.添加导出按钮

<el-button round class="exportExcel1" @click="doExport">导出Excel</el-button>

4.js方法

// 导出
    doExport() {
      this.excelData = this.tableData 
      this.export2Excel() 
    },
    // 数据写入excel
    export2Excel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel') // 这里必须使用绝对路径,使用@/+存放export2Excel的路径
        const tHeader = ['日期', '交易量区间/吨', '人数/个', '交易量/吨', '区间内交易量/吨', '交易量占比/%'] // 导出的excel的表头字段可自定义
        const filterVal = ['create_time', 'sale_interval', 'num', 'totalTon', 'totalTonAver', 'totalTonRatio'] // 对象属性,对应于tHeader,即prop的值,可自定义导出字段
        const list = that.excelData // json数组对象,接口返回的数据
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'xxxx')// 导出的表格名称,可自定义
      })
    },
    // 格式转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
相关文章
|
2月前
|
关系型数据库 MySQL 区块链
将excel表格数据导入Mysql新建表中
将excel表格数据导入Mysql新建表中
excel判断表格中是否有重复值
excel判断表格中是否有重复值
|
4天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
9 1
|
4月前
|
数据可视化 数据挖掘 定位技术
R语言读取Excel表格数据并绘制多系列柱状图、条形图
R语言读取Excel表格数据并绘制多系列柱状图、条形图
|
22天前
|
JavaScript
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
|
22天前
|
JavaScript
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
|
1月前
|
Serverless 数据处理 索引
Python 处理 Excel 表格的 14 个常用操作
Python 处理 Excel 表格的 14 个常用操作
36 0
|
1月前
|
Web App开发 JavaScript 前端开发
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
现在,随着数字化进程渗透到到各行各业,数据安全已经成为了数字化革命中的重要组成部分,而在线Office成在OA、ERP、文档系统中得到了广泛的应用,为我国的信息化事业也做出了巨大贡献。随着操作系统、浏览器及Office软件的不断升级和更新换代,加上国家对信息化、数字化系统要求的不断提升,一些厂家的WebOffice控件产品不断被淘汰出局,而现存的几个产品也存在以下几个问题:
424 1
2024年纯前端VUE在线编辑微软Office/金山WPS的Word/Excel文档
|
2月前
|
机器学习/深度学习 数据可视化 数据挖掘
【办公自动化】使用Python一键提取PDF中的表格到Excel
【办公自动化】使用Python一键提取PDF中的表格到Excel
73 0
QGS
|
3月前
|
JavaScript 安全 前端开发
手摸手vue2+Element-ui整合Axios
手摸手vue2+Element-ui整合Axios
QGS
29 0