VUE+ElementUI生成Excel模板导入数据生成表格(自适应)

最近项目需求，需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ，生成Excel表格模板，再通过Excel模板填写数据上传Excel，展示在页面上。

该功能的难点在于每条数据模板都不一样，需要动态生成模板，以及自适应显示上传的表格内容。

1.导出表格模板

首先前端从后台获取数组类型的模板数据(this.tableHead)

使用exportExcel.js 导出Excel

exportExcel.js

import XLSX from 'xlsx';/*** 导出Excel的处理函数* @param {Array} headers: [{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]* @param {Array} data   : [{date: '2019-05-31', name: 'megen.huang'}, {date: 'name', name: '小明'}]* @param {String} fileName: '导出结果.xlsx'* */
export default function ExportExcel(headers, data, fileName = '导出结果.xlsx') {const _headers = headers.map((item, i) => Object.assign({}, {key: item.key,title: item.title,position: String.fromCharCode(65 + i) + 1})).reduce((prev, next) => Object.assign({}, prev, {[next.position]: {key: next.key,v: next.title}}), {});const _data = data.map((item, i) => headers.map((key, j) => Object.assign({}, {content: item[key.key],position: String.fromCharCode(65 + j) + (i + 2)})))// 对刚才的结果进行降维处理（二维数组变成一维数组）.reduce((prev, next) => prev.concat(next))// 转换成 worksheet 需要的结构.reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.content}}), {});// 合并 headers 和 dataconst output = Object.assign({}, _headers, _data);// 获取所有单元格的位置const outputPos = Object.keys(output);// 计算出范围 ,["A1",..., "H2"]const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;// 构建 workbook 对象const wb = {SheetNames: ['mySheet'],Sheets: {mySheet: Object.assign({},output, {'!ref': ref,// eslint-disable-next-line'!cols': headers.map(item => ({wpx: 100}))})}};// 导出 ExcelXLSX.writeFile(wb, fileName);
}

先将模板数据拼接成表头格式的数据，例：headers: [{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]

然后导出Excel表格

 // 导出数据为exceldownloadToExcel() {this.$refs.dataForm.validate((valid) => {if (valid && this.tableHead.length>0) {//拼接表头格式 headers: [{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]const headers = []for (const j in this.tableHead) {const title = {title: this.tableHead[j]}headers.push(title)}//给导出表格空数据const data = [{}]//导出表格命名const fileName = this.exportExcelName +'_'+ new Date().getTime() + '.xlsx'ExportExcel(headers, data, fileName)}})},

2.导入Excel动态在浏览器中生成表格

使用xlsx-to-table插件

<xlsx-to-table @on-select-file="handleSelectedFile">数据导入</xlsx-to-table>

      //数据导入handleSelectedFile (convertedData) {this.tableHead =convertedData.header     //取导入表格的表头this.inParamList = convertedData.body    //导入表格的数据},

循环遍历表头数组生成表头项 prop属性绑定表头项目对应列表中数据名

<el-table :data="inParamList"><template v-for='col in tableHead'><el-table-column :prop="col" :label="col" min-width="180"></el-table-column></template>
</el-table>

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)相关推荐

使用教程--通过Excel模板导入数据到表单
大家好,增加Excel导入数据功能在挺早之前就列在我的开发计划中了.由于各种事耽搁,导致才上线这个功能.废话不多说了.直接讲讲,在Z平台中是怎样用Excel导入数据的. 我以两个例子来为大家讲解使用方 ...
springboot+vue+element-ui下载excel模板（静态文件）
前端: html:<div style="margin-top: 20px"><el-button @click="downloadDemo" ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
Spring Boot 实现excel 批量导入数据（模板下载 -＞数据导入-＞导入失败表格下载）
批量导入数据以用户为例[不贴数据库操作代码,都是简单的插入和查询操作自己写] 1 导入依赖 2 批量导入模板下载 3 批量导入数据准备工作实现代码测试接口 4 下载导入失败表格 5 实体类 6 ...
Java动态生成excel模板文件(包含列下拉)
1.添加依赖  <dependency><gr ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
JAVA动态生成excel模板；列自定义下拉框赋值
哈喽,2023大家开工大吉啊!财源滚滚! 业务需求:需要生成excel模板,且对部分列设置下拉框,进行动态赋值,效果如下: 拿上图举例:针对省这一列,不是填写,而是选择数据,也就是说我们生成excel ...
excel使用MySQL数据,如何使用mysql完成excel中的数据生成
Excel是数据分析中最常用的工具,本篇文章通过mysql与excel的功能对比介绍如何使用mysql完成excel中的数据生成,数据清洗,预处理,以及最常见的数据分类,数据筛选,分类汇总,以及数据透 ...
java如何根据模板填充数据生成word文档
java根据模板填充数据生成word文档这篇文章干什么? 思路总览 1.准备word模板 2.转换文件格式 3.编写代码补充--下载流这篇文章干什么? 使用代码将word模板内容进行替换,并 ...

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)

1.导出表格模板

2.导入Excel动态在浏览器中生成表格

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)相关推荐

最新文章

热门文章

VUE+ElementUI生成Excel模板 导入数据生成表格(自适应)

VUE+ElementUI生成Excel模板 导入数据生成表格(自适应)

1.导出表格模板

2.导入Excel动态在浏览器中生成表格

VUE+ElementUI生成Excel模板 导入数据生成表格(自适应)相关推荐

最新文章

热门文章

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)相关推荐