一?后端代碼

1 創(chuàng)建 excel 的導(dǎo)出實(shí)體

package com.baiyee.sdgt.vo.cmn;import com.alibaba.excel.annotation.ExcelProperty; import lombok.Data;/** * @className: DictEeVo * @description: 用于導(dǎo)入和導(dǎo)出excel * @date: 2021/10/12 * @author: cakin */ @Data public class DictEeVo {@ExcelProperty(value = "id", index = 0)private Long id;@ExcelProperty(value = "上級(jí)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?導(dǎo)出接口

// 導(dǎo)出數(shù)據(jù)字典接口 void exportDictData(HttpServletResponse response);

3?實(shí)現(xiàn)類

// 導(dǎo)出數(shù)據(jù)字典接口 @Override public void exportDictData(HttpServletResponse response) {//設(shè)置下載信息response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");String fileName = "dict";response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");// 查詢數(shù)據(jù)庫(kù)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);}// 調(diào)用方法進(jìn)行寫操作try {EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("dict").doWrite(dictVoList);} catch (IOException e) {e.printStackTrace();} }

4?控制器

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

二?前端頁(yè)面

<template><div class="app-container"><!-- 導(dǎo)出功能 --><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" /> 導(dǎo)出</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="創(chuàng)建時(shí)間" 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: [] //數(shù)據(jù)字典列表數(shù)組};},created() {this.getDictList(1);},methods: {// 數(shù)據(jù)字典列表getDictList(id) {dict.dictList(id).then(response => {this.list = response.data;});},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data);});},// 導(dǎo)出功能exportData() {window.location.href = "http://localhost:8202/admin/cmn/dict/exportData";}} }; </script>

三?測(cè)試效果

點(diǎn)擊導(dǎo)出后，可以正常導(dǎo)出

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。