一?后端代碼

1 創建 excel 的導出實體

package com.baiyee.sdgt.vo.cmn;import com.alibaba.excel.annotation.ExcelProperty; import lombok.Data;/** * @className: DictEeVo * @description: 用于導入和導出excel * @date: 2021/10/12 * @author: cakin */ @Data public class DictEeVo {@ExcelProperty(value = "id", index = 0)private Long id;@ExcelProperty(value = "上級id", index = 1)private Long parentId;@ExcelProperty(value = "名稱", index = 2)private String name;@ExcelProperty(value = "值", index = 3)private String value;@ExcelProperty(value = "編碼", index = 4)private String dictCode; }

2?導出接口

// 導出數據字典接口 void exportDictData(HttpServletResponse response);

3?實現類

// 導出數據字典接口 @Override public void exportDictData(HttpServletResponse response) {//設置下載信息response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");String fileName = "dict";response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");// 查詢數據庫List<Dict> dictList = baseMapper.selectList(null);// Dict -- DictEeVoList<DictEeVo> dictVoList = new ArrayList<>();for (Dict dict : dictList) {DictEeVo dictEeVo = new DictEeVo();// dictEeVo.setId(dict.getId());BeanUtils.copyProperties(dict, dictEeVo);dictVoList.add(dictEeVo);}// 調用方法進行寫操作try {EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("dict").doWrite(dictVoList);} catch (IOException e) {e.printStackTrace();} }

4?控制器

// 導出數據字典接口 @GetMapping("exportData") public void exportDict(HttpServletResponse response) {dictService.exportDictData(response); }

二?前端頁面

<template><div class="app-container"><!-- 導出功能 --><div class="el-toolbar"><div class="el-toolbar-body" style="justify-content: flex-start;"><el-button type="text" @click="exportData"><i class="fa fa-plus" /> 導出</el-button></div></div><!-- 列表功能 --><el-table:data="list"style="width: 100%"row-key="id"borderlazy:load="getChildrens":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column label="名稱" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template></el-table-column><el-table-column label="編碼" width="220"><template slot-scope="{row}">{{ row.dictCode }}</template></el-table-column><el-table-column label="值" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.value }}</span></template></el-table-column><el-table-column label="創建時間" align="center"><template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column></el-table></div> </template><script> import dict from "@/api/dict"; export default {data() {return {list: [] //數據字典列表數組};},created() {this.getDictList(1);},methods: {// 數據字典列表getDictList(id) {dict.dictList(id).then(response => {this.list = response.data;});},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data);});},// 導出功能exportData() {window.location.href = "http://localhost:8202/admin/cmn/dict/exportData";}} }; </script>

三?測試效果

點擊導出后，可以正常導出

?

總結

以上是生活随笔為你收集整理的vue 实现 excel 的导出功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。