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

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>