vue前端怎么导出excel表格

### Vue.js 实现导出 Excel 表格 #### 项目初始化与依赖安装 为了在Vue.js应用中实现Excel表格的导出功能，需先建立并配置好开发环境。创建名为`excel-export`的新项目，并进入该项目目录完成基础设置： ```bash vue init webpack excel-export cd excel-export npm install npm run dev ``` 随后，安装必要的第三方库以支持文件生成以及Excel文档处理能力： ```bash npm install -S file-saver xlsx npm install -D script-loader ``` 这些命令会引入`file-saver`用于客户端保存文件操作；而`xlsx`则是负责解析和生成.xlsx格式的工作簿对象[^2]。 #### 添加辅助脚本 接着，在项目的src/assets路径下新增两个重要文件——Blob.js 和 Export2Excel.js 。前者提供了跨浏览器兼容性的二进制大对象(Blob) API封装；后者则包含了具体业务逻辑，比如定义了如何把JSON数据转化为适合下载的形式。 Export2Excel.js 的核心部分可能如下所示: ```javascript import XLSX from 'xlsx'; function exportJsonToExcel({ header, data, filename = 'excel-list', }) { const wsName = "SheetJS"; const wb = { Sheets: {}, SheetNames: [] }; const ws_data = []; // 构建表头 if (header.length > 0 && Array.isArray(header)) { ws_data.push(header); } // 插入实际的数据行 if (data instanceof Array){ data.forEach((item, index)=>{ let tempArr=[]; Object.keys(item).forEach(key=>{ tempArr.push(item[key]); }); ws_data.push(tempArr); }) } /* generate worksheet */ const ws = XLSX.utils.aoa_to_sheet(ws_data); /* add to workbook */ wb.SheetNames.push(wsName); wb.Sheets[wsName] = ws; var wbout = XLSX.write(wb,{bookType:'xlsx', bookSST:true, type: 'array'}); try { FileSaver.saveAs(new Blob([wbout],{type:"application/octet-stream"}), `${filename}.xlsx`); } catch(e) { console.log(e,'error'); } } export default exportJsonToExcel; ``` 此代码片段展示了怎样利用 `xlsx` 库将 JSON 数据集转换成 Excel 工作表，并借助 `FileSaver` 提供的能力让用户能够直接点击按钮触发下载动作。 #### 组件内部调用 最后一步是在具体的 Vue 组件里集成上述功能。假设有一个简单的HTML表格展示了一些用户列表信息，那么可以在对应的.vue文件内编写这样的事件处理器来进行导出操作： ```html <template> <div id="app"> <!-- ...其他模板结构... --> <button @click="handleDownload">导出为Excel</button> </div> </template> <script> // 导入自定义模块 import exportJsonToExcel from '@/assets/Export2Excel' export default { name: 'App', methods:{ handleDownload(){ const tHeader = ['姓名','年龄']; const filterVal = ['name','age']; this.list = [ {"name":"张三","age":28}, {"name":"李四","age":34} ]; const list = this.formatJson(filterVal,this.list); exportJsonToExcel({tHeader,list,filename:'users'}) }, formatJson(filterVal,data){ return data.map(v => filterVal.map(j => v[j])); } } }; </script> ``` 这段示例说明了当用户按下“导出为Excel”的按钮时，程序将会收集页面上的数据显示项作为列名(tHeader)，同时获取对应字段名称构成过滤条件(filterVal)，再结合待导出的具体记录(list)，最终调用前面提到过的`exportJsonToExcel()` 函数执行真正的导出流程[^1]。