导出功能是比较常见的功能之一，这里以一个简单的导出功能为示例，如果需要更复杂的导出功能，可以在此基础上进行丰富。
一、下载xlsx依赖
npm install xlsx --save
二、在所需要的页面js部分的script中引入xlsx
import XLSX from "xlsx";
以上适用于较低版本的vue，如果你是vue3，那么可以使用如下语句进行引入：
import * as XLSX from 'xlsx' // Vue3 版本
三、在template模板中需要的位置添加导出按钮，并为按钮绑定点击事件
<el-button type="success" size="mini" icon="Bottom" @click="clickExport" style="width: 120%; padding-right:10px;">Excel导出</el-button>
四、进行导出事件的实现和导出函数的书写
// 导出 /* * @description: * @param {Object} json 服务端发过来的数据 * @param {String} name 导出Excel文件名字 * @param {String} titleArr 导出Excel表头 * @param {String} sheetName 导出sheetName名字 * @return: */ function exportExcel(json, name, titleArr, sheetName) { /* convert state to workbook */ var data = new Array(); var keyArray = new Array(); const getLength = function (obj) { var count = 0; for (var i in obj) { if (obj.hasOwnProperty(i)) { count++; } } return count; }; for (const key1 in json) { if (json.hasOwnProperty(key1)) { const element = json[key1]; var rowDataArray = new Array(); for (const key2 in element) { if (element.hasOwnProperty(key2)) { const element2 = element[key2]; rowDataArray.push(element2); if (keyArray.length < getLength(element)) { keyArray.push(key2); } } } data.push(rowDataArray); } } // keyArray为英文字段表头 data.splice(0, 0, keyArray, titleArr); console.log('data', data); const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); // 此处隐藏英文字段表头 var wsrows = [{ hidden: true }]; ws['!rows'] = wsrows; // ws - worksheet XLSX.utils.book_append_sheet(wb, ws, sheetName); /* generate file and send to client */ XLSX.writeFile(wb, name + '.xlsx'); } //导出事件函数 const clickExport = () => { const titleArr = ['序号id', '报名人姓名', '手机号', '创业中心活动id', '用户id','创建时间','更新时间','审核状态1:审核中 2.审核通过 3.审核未通过','活动名称','用户姓名']//表头中文名 arr.value.pop(); exportExcel(arr.value, 'test', titleArr, 'sheetName'); }
其中arr是要导出的数据源。
以上就是前端导出功能的简单实现，如果有什么补充欢迎留言区补充。
