VUE+ElementUI生成Excel模板 导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板 导入数据生成表格(自适应)最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模板填写数据上传Excel,展示在页面上。该功能的难点在于每条数据模板都不一样,需要动态生成模板,以及自适应显示上传的表格内容。1.导出表格模板首先前端从后台获取数组类型的模板数据(this.tableH
·
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 和 data
const 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
}))
}
)
}
};
// 导出 Excel
XLSX.writeFile(wb, fileName);
}
先将模板数据拼接成表头格式的数据 ,例:headers: [{key: 'date', title: '日期'}, {key: 'name', title: '名称'}]
然后导出Excel表格
// 导出数据为excel
downloadToExcel() {
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>
更多推荐
已为社区贡献1条内容
所有评论(0)