网站建设都有什么工作要做,百度创建网站,网站建设忄金手指花总,上海网站建设价位前言
需求场景
最近在开发项目时需要批量导入和导出Excel数据#xff0c;在实现这个需求时#xff0c;我们既可以在前端完成数据解析和文件生成工作#xff0c;也可以通过前端发起导入以及导出请求后#xff0c;后端实现解析文件流解析文件内容以及生成文件并提供下载链接…前言
需求场景
最近在开发项目时需要批量导入和导出Excel数据在实现这个需求时我们既可以在前端完成数据解析和文件生成工作也可以通过前端发起导入以及导出请求后后端实现解析文件流解析文件内容以及生成文件并提供下载链接的功能。 相较于后端处理Excel数据而言使用前端导入导出可以提供更高的实时性用户可以直接在浏览器中触发导出操作无需等待后端处理。且可以在前端完成数据生成以及数据校验处理工作大大减轻后端服务器的压力大幅增强用户体验。 具体的技术方案选型主要看业务场景如果对于小型数据集、实时性需求较高的导入导出操作优先考虑前端实现。而对于大型数据集、需要业务逻辑处理、以及安全性要求高的场景则后端处理更为合适。
技术方案
xlsx与xlsx-style组合方案xlsx 是目前前端最常用的Excel解决方案又叫做SheetJS但社区版不支持修改Excel的样式需要购买Pro版才可以如果需要修改导出的Excel文件样式需要结合xlsx-style库一起使用。但遗憾的是xlsx库已经两年多不更新而xlsx-style上一个版本更是8年前发布目前已经不再推荐使用该方案。 exceljs与file-saver方案exceljs是一款免费开源支持导入导出Excel 操作工具并且可以实现样式的修改以及 Excel 的高级功能是非常值得推荐的一个处理 Excel 的库file-saver可以实现保存文件到本地。本文以exceljs与file-saver操作xlsx格式文件为例介绍如何具体上手使用。
exceljs介绍
ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库。它提供了丰富的功能和灵活的API使你能够在你的应用程序中处理和操作Excel文件。 下面是一些ExcelJS库的关键特性和功能
创建和修改Excel文件ExcelJS允许你创建新的Excel工作簿并在其中添加工作表、行和单元格。你可以设置单元格的值、样式、数据类型以及其他属性。读取和解析Excel文件ExcelJS支持读取和解析现有的Excel文件。你可以将Excel文件加载到工作簿中然后访问工作表、行和单元格的数据。导出和保存Excel文件ExcelJS可以将工作簿保存为Excel文件支持多种格式如XLSX、XLS和CSV。你可以将工作簿保存到本地文件系统或将其发送到客户端以供下载。处理复杂的Excel功能ExcelJS支持处理复杂的Excel功能如公式、图表、数据验证、条件格式和保护工作表等。你可以根据需要设置和操作这些功能。支持自定义样式和格式ExcelJS允许你自定义单元格、行、列和工作表的样式和格式。你可以设置字体、颜色、填充、边框、对齐方式以及数字和日期格式等。
参考文档
npm仓库地址https://www.npmjs.com/package/exceljs 官方中文文档地址https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md
快速上手
安装依赖
exceljs用于Excel数据处理file-sever用于保存到本地文件。
npm i exceljs
npm i file-saver导出Excel
让我们先从简单的数据导出开始快速体验如何使用exceljs导出Excel文件需要注意的是在浏览器环境中运行 JavaScript浏览器的安全策略通常不允许直接访问读写本地文件系统。在这种情况下需要通过其他方式将文件转换为buffer数据在导出Excel时使用FileSaver.js库将缓冲区数据保存到文件中。
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 175, 体重: 74},{姓名: 李四, 年龄: 22, 身高: 177, 体重: 84},{姓名: 王五, 年龄: 53, 身高: 155, 体重: 64}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}
/scriptstyle scoped langscss/style当我们点击导出excel按钮时调用exportFile函数完成excel文件下载下载后的文件内容如下
导入Excel
导入excel文件时同样使用FileReader的readAsArrayBuffer方法将文件转换为二进制字符串然后从buffer中加载数据并解析。
templateinputtypefileaccept.xls,.xlsxclassupload-filechangeimportExcel($event)/
/templatescript setup
import ExcelJS from exceljs;
// 导出excel文件
const importExcel (event) {//获取选择的文件const files event.target.files//创建Workbook实例const workbook new ExcelJS.Workbook();// 使用FileReader对象来读取文件内容const fileReader new FileReader()// 二进制字符串的形式加载文件fileReader.readAsArrayBuffer(files[0])fileReader.onload ev {console.log(ev)// 从 buffer中加载数据解析workbook.xlsx.load(ev.target.result).then(workbook {// 获取第一个worksheet内容const worksheet workbook.getWorksheet(1);// 获取第一行的标题const headers [];worksheet.getRow(1).eachCell((cell) {headers.push(cell.value);});console.log(headers, headers)// 创建一个空的JavaScript对象数组用于存储解析后的数据const data [];// 遍历工作表的每一行从第二行开始因为第一行通常是标题行for (let rowNumber 2; rowNumber worksheet.rowCount; rowNumber) {const rowData {};const row worksheet.getRow(rowNumber);// 遍历当前行的每个单元格row.eachCell((cell, colNumber) {// 获取标题对应的键并将当前单元格的值存储到相应的属性名中rowData[headers[colNumber - 1]] cell.value;});// 将当前行的数据对象添加到数组中data.push(rowData);}console.log(data, data)})}
}
/scriptstyle scoped langscss/style上传文件后解析内容如下所示
进阶操作
添加数据
我们可以通过columns方法添加列标题并定义列键和宽度设置好表头后我们可以直接通过addRow方法根据key值去添加每一行的数据。 参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%88%97 完整代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 添加表头列数据sheet1.columns [{header: 姓名, key: name, width: 20},{header: 年龄, key: age, width: 10},{header: 身高, key: height, width: 10},{header: 体重, key: weight, width: 10},];// 添加内容列数据sheet1.addRow({sort: 1, name: 张三, age: 18, height: 175, weight: 74});sheet1.addRow({sort: 2, name: 李四, age: 22, height: 177, weight: 88});sheet1.addRow({sort: 3, name: 王五, age: 53, height: 155, weight: 62});// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style添加数据后导出文件效果如下
读取数据
我们可以使用getRow方法传入指定行参数读取行数据。 使用getColumn方法传入键、字母、id参数读取列数据。 使用eachCell方法可以遍历每个单元格内容。 参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%A1%8C 代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 添加表头列数据sheet1.columns [{header: 姓名, key: name, width: 20},{header: 年龄, key: age, width: 10},{header: 身高, key: height, width: 10},{header: 体重, key: weight, width: 10},];// 添加内容列数据sheet1.addRow({sort: 1, name: 张三, age: 18, height: 175, weight: 74});sheet1.addRow({sort: 2, name: 李四, age: 22, height: 177, weight: 88});sheet1.addRow({sort: 3, name: 王五, age: 53, height: 155, weight: 62});// 读取行数据sheet1.getRow(1).eachCell((cell, rowIdx) {console.log(行数据, cell.value, rowIdx);});// 读取列数据,可以通过键(name)字母(B)和基于id(1)的列号访问单个列sheet1.getColumn(name).eachCell((cell, rowIdx) {console.log(列数据, cell.value, rowIdx);});
}/scriptstyle scoped langscss/style效果
样式
在导出excel文件时默认没有任何样式的为了美观我们需要添加样式而exceljs支持修改表格样式具体内容可参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%A0%B7%E5%BC%8F 例如我们需要设置所有单元格居中对齐并添加边框。并分别指定标题行和内容行字体大小、背景颜色、行高属性代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 175, 体重: 74},{姓名: 李四, 年龄: 22, 身高: 177, 体重: 84},{姓名: 王五, 年龄: 53, 身高: 155, 体重: 64}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 修改所有单元格样式// 遍历每一行sheet1.eachRow((row, rowNumber) {// 遍历每个单元格row.eachCell((cell) {// 设置边框样式cell.border {top: {style: thin},left: {style: thin},bottom: {style: thin},right: {style: thin}};// 设置居中对齐cell.alignment {vertical: middle,horizontal: center};});});// 获取标题行数据const titleCell sheet1.getRow(1);// 设置行高为30titleCell.height 30// 设置标题行单元格样式titleCell.eachCell((cell) {// 设置标题行背景颜色为黄色cell.fill {type: pattern,pattern: solid,fgColor: {argb: FFFF00}};// 设置标题行字体cell.font {color: {argb: FF0000}, //颜色为红色bold: true,// 字体粗体size: 18 // 设置字体大小为18};})// 获取第二行到最后一行的内容数据const bodyRows sheet1.getRows(2, sheet1.rowCount);// 处理内容行的数据bodyRows.forEach((bodyRow) {// 设置行高为20bodyRow.height 20bodyRow.eachCell((cell) {cell.font {size: 16 // 设置内容行字体大小为16};});});// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style导出Excel样式效果如下所示已经成功按我们指定的样式导出了文件
筛选
在很多的时候我们需要对表格中每一列的数据进行筛选比如直接筛选姓名等列信息我们可以通过 autoFilter 来添加筛选。参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%87%AA%E5%8A%A8%E7%AD%9B%E9%80%89%E5%99%A8 代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 175, 体重: 74},{姓名: 李四, 年龄: 22, 身高: 177, 体重: 84},{姓名: 王五, 年龄: 53, 身高: 155, 体重: 64}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 单列筛选// sheet1.autoFilter A1;// 多个列筛选sheet1.autoFilter A1:C1;// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style导入后的效果如下在姓名、年龄、身高列添加了筛选按钮
公式值
参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%80%BC%E7%B1%BB%E5%9E%8B 我们可以直接对表格中的数据进行公式计算比如 求和(SUM)平均数(AVERAGE) 等。 例如我们需要计算平均值、最大值、指定公式时代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 1.75, 体重: 74},{姓名: 李四, 年龄: 22, 身高: 1.77, 体重: 84},{姓名: 王五, 年龄: 53, 身高: 1.55, 体重: 64}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 添加单元格sheet1.getCell(E1).value BMI指数;sheet1.getCell(F1).value 平均身高;sheet1.getCell(G1).value 最大体重;// 计算平均身高sheet1.getCell(F2).value {formula: AVERAGE(C2:C4)};// 计算最大体重sheet1.getCell(G2).value {formula: MAX(D2:D4)};// 计算BMI指数// 获取第5列对象const BMIRange sheet1.getColumn(5)BMIRange.eachCell((cell) {console.log(cell, cell)console.log(cell.row)// 从第二列开始添加计算公式if (cell.row 2) {sheet1.getCell(E cell.row).value {formula: D cell.row / (C cell.row * C cell.row )};}})// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style导出Excel文件效果如下E列已经自动替换为公式计算。
合并单元格
表格的合并应该是业务需求中最频繁的功能。当然这一功能使用 xlsx 也可以实现我们只需要使用mergeCells方法传入合并单元格范围参数即可。 参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC 具体代码实现如下所示
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 175, 体重: 74},{姓名: 李四, 年龄: 18, 身高: 未知, 体重: 未知},{姓名: 王五, 年龄: 53, 身高: 未知, 体重: 未知},{姓名: 赵六, 年龄: 12, 身高: 未知, 体重: 未知}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 上下合并单元格sheet1.mergeCells(B2:B3);// 左右合并单元格sheet1.mergeCells(C3:D3);// 范围合并单元格sheet1.mergeCells(C4:D5);// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style
单元格合并后导出文件效果如下
数据验证
有时候我们需要为某个单元格添加数据可以方便直接下拉选择指定的值此时就需要使用数据验证功能传入可填写的选项列表。 参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81 例如我们对是否注册列添加数据验证可填值为是、否、未知具体代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 1.75, 体重: 74, 是否注册: },{姓名: 李四, 年龄: 22, 身高: 1.77, 体重: 84, 是否注册: },{姓名: 王五, 年龄: 53, 身高: 1.55, 体重: 64, 是否注册: }]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 获取第5列对象const VerificationRange sheet1.getColumn(5)VerificationRange.eachCell((cell) {// 从第二列开始添加数据验证规则if (cell.row 2) {sheet1.getCell(E cell.row).dataValidation {type: list,allowBlank: true,formulae: [是,否,未知]};}})// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style
导出的excel文件效果如下
条件格式化
我们可以为指定单元格添加条件格式对满足条件的单元格设置指定的样式。 参考文档https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%9D%A1%E4%BB%B6%E6%A0%BC%E5%BC%8F%E5%8C%96 例如为年龄大于18岁单元格进行红色标注代码如下
templateel-button typeprimary clickexportExcel导出excel/el-button
/templatescript setup
import ExcelJS from exceljs;
import FileSaver from file-saver;
// 导出excel文件
const exportExcel () {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 导出数据列表const data [{姓名: 张三, 年龄: 18, 身高: 1.75, 体重: 74},{姓名: 李四, 年龄: 22, 身高: 1.77, 体重: 84},{姓名: 王五, 年龄: 53, 身高: 1.55, 体重: 64}]// 获取表头所有键const headers Object.keys(data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 年龄大于18岁红色标注sheet1.addConditionalFormatting({ref: B2:B4,rules: [{type: cellIs,operator: greaterThan,priority: 1,formulae: [18],style: {fill: {type: pattern,pattern: solid,bgColor: { argb: FFFFC0CB },},},},],});// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, ExcelJS.xlsx);}).catch(error console.log(Error writing excel export, error))
}/scriptstyle scoped langscss/style导出后的文件效果如下
封装exceljs
封装导入导出函数
为了提高项目代码的复用性通常会将excel导入导出功能封装到单独的函数中方便调用封装后的函数如下
import ExcelJS from exceljs;
import FileSaver from file-saver;
import {timeFile} from /utils/timeFormat;
// 导出excel文件
export function exportFile(export_data, filename) {// 创建工作簿const workbook new ExcelJS.Workbook();// 添加工作表名为sheet1const sheet1 workbook.addWorksheet(sheet1);// 获取表头所有键const headers Object.keys(export_data[0])// 将标题写入第一行sheet1.addRow(headers);// 将数据写入工作表export_data.forEach((row) {const values Object.values(row)sheet1.addRow(values);});// 设置默认宽高属性sheet1.properties.defaultColWidth 20sheet1.properties.defaultRowHeight 20// 修改所有单元格样式// 遍历每一行sheet1.eachRow((row, rowNumber) {// 遍历每个单元格row.eachCell((cell) {// 设置边框样式cell.border {top: {style: thin},left: {style: thin},bottom: {style: thin},right: {style: thin}};// 设置居中对齐cell.alignment {vertical: middle,horizontal: center};});});// 获取标题行数据const titleCell sheet1.getRow(1);// 设置标题行单元格样式titleCell.eachCell((cell) {// 设置标题行背景颜色cell.fill {type: pattern,pattern: solid,fgColor: {argb: 3498db}};// 设置标题行字体cell.font {bold: true,// 字体粗体};})// 导出表格文件workbook.xlsx.writeBuffer().then((buffer) {let file new Blob([buffer], {type: application/octet-stream});FileSaver.saveAs(file, filename timeFile() .xlsx);}).catch(error console.log(Error writing excel export, error))
}// 导入excel文件
export function importFile(content) {return new Promise((resolve, reject) {// 创建一个空的JavaScript对象数组用于存储解析后的数据const data [];//创建Workbook实例const workbook new ExcelJS.Workbook();workbook.xlsx.load(content).then(workbook {// 获取第一个worksheet内容const worksheet workbook.getWorksheet(1);// 获取第一行的标题const headers [];worksheet.getRow(1).eachCell((cell) {headers.push(cell.value);});// console.log(headers, headers)// 遍历工作表的每一行从第二行开始因为第一行通常是标题行for (let rowNumber 2; rowNumber worksheet.rowCount; rowNumber) {const rowData {};const row worksheet.getRow(rowNumber);// 遍历当前行的每个单元格row.eachCell((cell, colNumber) {// 获取标题对应的键并将当前单元格的值存储到相应的属性名中rowData[headers[colNumber - 1]] cell.value;});// 将当前行的数据对象添加到数组中data.push(rowData);}// console.log(data, data)resolve(data);}).catch(error {reject(error);});})
}vue组件调用
以element plus为例调用函数完成Excel文件导入与导出代码如下
templateel-button typeprimary clickexportExcel导出excel/el-buttonel-button typesuccess clickimportExcel导入excel/el-buttonp导入数据预览/p{{ uploadData}}el-dialogv-modeluploadDialogVisibletitle批量添加数据width40%el-form label-width120pxel-form-item label模板下载el-button typeinfo clickdownloadTemplateel-iconDownload//el-icon点击下载/el-button/el-form-itemel-form-item label文件上传el-upload drag accept.xls,.xlsx :auto-uploadfalse :on-changehandleChangeel-icon classel-icon--uploadupload-filled//el-icondiv classel-upload__text将文件拖到此处或em点击上传/em/divtemplate #tipdiv classel-upload__tip请上传.xls,.xlsx格式文件文件最大为500kb/div/template/el-upload/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickuploadDialogVisible false取消/el-buttonel-button typeprimary clicksubmitUpload导入/el-button/span/template/el-dialog
/templatescript setup
import {ref} from vue;
import {ElMessage} from element-plus;
import {Download, UploadFilled} from element-plus/icons-vue
import {getDemo} from /api/home;
import {timeFormatConversion} from /utils/timeFormat;
import {exportFile, importFile} from /utils/excel;
// 表格字段配置
const fieldConfig ref([{label: ID, // 标签model: id,// 字段名is_export: true,// 是否导出该字段},{label: 用户名, // 标签model: username,// 字段名is_export: true, // 是否导出该字段},{label: 省份, // 标签model: province,// 字段名is_export: true // 是否导出该字段},{label: 性别, // 标签model: sex_name,// 字段名is_export: true // 是否导出该字段},{label: 生日, // 标签model: birthday,// 字段名is_export: true, // 是否导出该字段},{label: 身高(cm), // 标签model: height,// 字段名is_export: true, // 是否导出该字段},{label: 体重(kg), // 标签model: weight,// 字段名is_export: true,// 是否导出该字段},{label: 注册时间, // 标签model: created_time,// 字段名is_export: true, // 是否导出该字段},{label: 个人介绍, // 标签model: introduction,// 字段名is_export: true,// 是否导出该字段}
])
// 导出Excel事件
const exportExcel () {ElMessage({message: 开始导出数据请稍候,type: success,})// 导出数据查询参数const printParams {size: 1000,page: 1,}// 获取需要导出的字段配置const export_fields fieldConfig.value.filter(obj obj[is_export]).map(({label, model}) ({[model]: label}))// 处理数据结构getDemo(printParams).then((response) {// console.log(response.results)const export_data response.results.map(obj {const newObj {};export_fields.forEach(field {const [key, value] Object.entries(field)[0];if (key created_time) {newObj[value] timeFormatConversion((obj[key]), YYYY-MM-DD HH:mm:ss);} else {newObj[value] obj[key];}});return newObj;});let filename 示例用户exportFile(export_data, filename);}).catch(response {//发生错误时执行的代码console.log(response)ElMessage.error(获取列表数据失败)});
}
// 导入excel弹窗是否显示
const uploadDialogVisible ref(false)
// 点击导入excel按钮事件
const importExcel () {uploadDialogVisible.value true
}
// 下载模板文件
const downloadTemplate () {window.open(https://api.cuiliangblog.cn/static/demo-template.xlsx)
}
// 文件数据
const uploadDataref([])
// 文件上传事件
const handleChange (file) {const reader new FileReader();reader.onload () {const content reader.result;importFile(content).then((data) {console.log(data)uploadData.value data}).catch(response {//发生错误时执行的代码console.log(response)ElMessage.error(获取列表数据失败)});};reader.readAsBinaryString(file.raw);
};
// 点击导入excel提交数据事件
const submitUpload () {uploadDialogVisible.value false
}
/scriptstyle scoped langscss/style页面效果
封装后的页面效果如下至此一个简单的vue前端实现Excel文件导入导出功能便开发完成了。
完整代码
giteehttps://gitee.com/cuiliang0302/vue3_vite_element-plus githubhttps://github.com/cuiliang0302/vue3-vite-template
查看更多
微信公众号
微信公众号同步更新欢迎关注微信公众号《崔亮的博客》第一时间获取最近文章。
博客网站
崔亮的博客-专注devops自动化运维传播优秀it运维技术文章。更多原创运维开发相关文章欢迎访问https://www.cuiliangblog.cn
