位置: IT常识 - 正文

Vue中实现自定义excel下载(vue自定义dialog)

编辑:rootadmin
Vue中实现自定义excel下载

推荐整理分享Vue中实现自定义excel下载(vue自定义dialog),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue自定义方法,vue设置自定义属性,vue自定义方法,vue自定义dialog,vue自定义dialog,vue实现自定义指令,vue实现自定义指令,vue实现自定义指令,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能。

实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿。第二种是后端传给前端一个json的list,前端用后端传过来的json的list直接在前端合成一个excel。

第一种:后端生成excel

java后端生成excel代码

生成excel工具方法

/** * @author: wu linchun * @creat: 2021-07-29 9:49 * @desc: 将list集合转成Excel文件 * list: 内容list * path: 上传的excel路径 * fileName: 上传的excel名称 **/public static String createExcel(List<? extends Object> list, String path, String fileName) {String result = "";if (list.size() == 0 || list == null) {result = "没有对象信息";} else {Object o = list.get(0);Class<? extends Object> clazz = o.getClass();String className = clazz.getSimpleName();//这里通过反射获取字段数组Field[] fields = clazz.getDeclaredFields();File folder = new File(path);if (!folder.exists()) {folder.mkdirs();}String name = fileName.concat(".xls");WritableWorkbook book = null;File file = null;try {file = new File(path.concat(File.separator).concat(name));//创建xls文件book = jxl.Workbook.createWorkbook(file);WritableSheet sheet = book.createSheet(className, 0);//列int i = 0;//行int j = 0;for (Field f : fields) {j = 0;//这里把字段名称写入excel第一行中Label label = new Label(i, j, f.getName());sheet.addCell(label);j = 1;for (Object obj : list) {Object temp = getFieldValueByName(f.getName(), obj);String strTemp = "";if (temp != null) {strTemp = temp.toString();}//把每个对象此字段的属性写入这一列excel中sheet.addCell(new Label(i, j, strTemp));j++;}i++;}book.write();result = file.getPath();} catch (Exception e) {// TODO Auto-generated catch blockresult = "SystemException";e.printStackTrace();} finally {fileName = null;name = null;folder = null;file = null;if (book != null) {try {book.close();} catch (WriteException e) {// TODO Auto-generated catch blockresult = "WriteException";e.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blockresult = "IOException";e.printStackTrace();}}}}//最后输出文件路径return result;}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

下载文件

/** * @author: wu linchun * @creat: 2021-07-29 13:28 * @desc: 下载错误模板 **/@Overridepublic ResponseEntity<Object> downloadErrorModel() throws FileNotFoundException {// 这里的fileName是指路径+文件名String fileName="move_cms/src/main/resources/static/errorList.xls";File file = new File(fileName);InputStreamResource resource = new InputStreamResource(new FileInputStream((file)));org.springframework.http.HttpHeaders headers = new org.springframework.http.HttpHeaders();headers.add("Content-Disposition", String.format("attachment;filename="%s"", file.getName()));headers.add("Cache-Control", "no-cache,no-store,must-revalidate");headers.add("Pragma", "no-cache");headers.add("Expires", "0");ResponseEntity<Object> responseEntity = ResponseEntity.ok().headers(headers).contentLength(file.length()).contentType(MediaType.parseMediaType("application/text")).body(resource);return responseEntity;}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

下载excel的接口

/** * @author: wu linchun * @creat: 2021-07-29 11:41 * @desc: 下载错误模板 **/@ApiOperation(value = "下载错误模板")@GetMapping(value = "/downloadErrorModel")@PassTokenpublic ResponseEntity<Object> downloadErrorModel() throws FileNotFoundException {System.out.println("下载错误模板");return welfareGrantService.downloadErrorModel();}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

在掉/downloadErrorModel这个接口是要注意,只能用超链接 “<a:href />调用,不能使用axios调这个接口。这是由于axios获取的是json

而这个接口返回的是file类型,file会以byte流的形式在http上面传输,因此调/downloadErrorModel这个接口将会接收到byte流,axios默认是接收不了byte的,需要进行一些特殊的设置。可以参考一下这篇:vue使用axios接收流文件_weixin_43869439的博客-CSDN博客

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

如果使用超链接的方式访问接口进行文件下载的话,则需要获取到后端服务器的ip+port (实际中不建议这么做,因为get请求会暴露ip地址和端口,可通过浏览器f12看到ip地址和端口,不安全)

ip地址可通过 InetAddress.getLocalHost()获取到,端口号直接用@Value从配置文件中拿到。

第二种:前端合成excel

在vue工程中引入两个依赖:file-saver和xlsx

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

Vue中实现自定义excel下载(vue自定义dialog)

使用“npm install”,安装package.json中新增的依赖

npm install

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

新增 ExportExcelUtil.js,用来根据list生成excel

/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) {var out = [];var rows = table.querySelectorAll('tr');var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll('td');for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute('colspan');var rowspan = cell.getAttribute('rowspan');var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function (range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({s: {r: R,c: outRow.length},e: {r: R + rowspan - 1,c: outRow.length + colspan - 1}});};//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan)for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges];};function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);}function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C,r: R});if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);} else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};}function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}export function export_table_to_excel(id) {var theTable = document.getElementById(id);var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws['!merges'] = ranges;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")}export function export_json_to_excel({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'} = {}) {/* original data */filename = filename || 'excel-list'data = [...data]data.unshift(header);for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = [];merges.forEach(item => {ws['!merges'].push(XLSX.utils.decode_range(item))})}if (autoWidth) {/*设置worksheet每列的最大宽度*/const colWidth = data.map(row => row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {'wch': 10};}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255) {return {'wch': val.toString().length * 2};} else {return {'wch': val.toString().length};}}))/*以第一行为初始值*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch'];}}}ws['!cols'] = result;}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${filename}.${bookType}`);}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

在.vue中添加下载excel方法

// 下载ExceldownloadExcel () {import('@/utils/ExportExcelUtil').then(excel => {const filterVal = ['item', 'error']const tHeader = ['item', 'error']const data = this.formatModelJson(filterVal, this.errList)console.log(data)console.info(data)excel.export_json_to_excel({header: tHeader,data,filename: 'errorList'})})},// 格式化JSONformatModelJson (filterVal, list) {return list.map(v => filterVal.map(j => {return v[j]}))},

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

errorList是从后端传过来的

exportExcel () {getErrorListExcel().then(response => {this.errList = response.data})}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

使用created方法,在加载.vue时,就调用/getErrorListExcel接口,获取errorList的值。

created () {this.exportExcel()},

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

调用后端接口的api

import axios from 'axios'export function getErrorListExcel () {return axios.get('http://127.0.0.1:8082/login/getErrorListExcel', {}).then(response => response).catch(error => error)}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

后端接口设置errorList中的值

@GetMapping("/getErrorListExcel")public List<ErrorItemBO> getErrorListExcel() {List<ErrorItemBO> list = new ArrayList<>();for (int i = 0; i < 10; i++) {ErrorItemBO errorItemBO = new ErrorItemBO();errorItemBO.setItem("item" + i);errorItemBO.setError("error" + i);list.add(errorItemBO);}return list;}

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />

总结

如果涉及到文件下载,尽量后端传一个list,然后都在前端合成相应的文件以到达减轻服务器负担的作用。​

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。

有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文链接地址:https://www.jiuchutong.com/zhishi/295883.html 转载请保留说明!

上一篇:Python-实战:基于白鲸BWO算法的VMD超参数优化(python基本功)

下一篇:API 低代码开发:接口大师,一套开发、管理和提供接口的产品框架(低代码开发开源)

  • 华为p40像素是多少(华为p40像素是多少pro)

    华为p40像素是多少(华为p40像素是多少pro)

  • iphone充电槽插不进(苹果充电插口插不进去)

    iphone充电槽插不进(苹果充电插口插不进去)

  • 剪映支持的视频格式(剪映支持视频升降调吗)

    剪映支持的视频格式(剪映支持视频升降调吗)

  • excel表格数字自动排序怎么弄(excel表格数字自动排序)

    excel表格数字自动排序怎么弄(excel表格数字自动排序)

  • 荣耀v10怎么插内存卡(华为荣耀v10可以插内存卡插哪里)

    荣耀v10怎么插内存卡(华为荣耀v10可以插内存卡插哪里)

  • 苹果点阵投影器坏了能修吗(苹果点阵投影器没断电碰了会坏吗)

    苹果点阵投影器坏了能修吗(苹果点阵投影器没断电碰了会坏吗)

  • 腾讯课堂学生可以查看学生观看时间吗(腾讯课堂学生可以分享ppt吗)

    腾讯课堂学生可以查看学生观看时间吗(腾讯课堂学生可以分享ppt吗)

  • 苹果6p频繁自动关机(苹果6p频繁自动开关机)

    苹果6p频繁自动关机(苹果6p频繁自动开关机)

  • 物理机和虚拟机的区别(物理机和虚拟机怎么共享文件)

    物理机和虚拟机的区别(物理机和虚拟机怎么共享文件)

  • vivo下载的软件不在桌面上(vivo下载的软件怎么不显示在桌面)

    vivo下载的软件不在桌面上(vivo下载的软件怎么不显示在桌面)

  • 苹果手机微信可以设置夜间模式吗(苹果手机微信可以加密吗怎么设置)

    苹果手机微信可以设置夜间模式吗(苹果手机微信可以加密吗怎么设置)

  • 苹果6s关机后开机显示无法激活(苹果6p关机后开不起来)

    苹果6s关机后开机显示无法激活(苹果6p关机后开不起来)

  • nova6耳机孔在哪(华为nova 6的耳机插孔在哪里)

    nova6耳机孔在哪(华为nova 6的耳机插孔在哪里)

  • 怎么查自己名下的手机号(怎么查自己名下有没有房产)

    怎么查自己名下的手机号(怎么查自己名下有没有房产)

  • i53470是第几代(i53470那年的)

    i53470是第几代(i53470那年的)

  • 苹果拦截短信在哪里找(苹果拦截短信在哪里取消)

    苹果拦截短信在哪里找(苹果拦截短信在哪里取消)

  • 淘宝悬浮窗怎么开启(淘宝悬浮窗怎么设置出来)

    淘宝悬浮窗怎么开启(淘宝悬浮窗怎么设置出来)

  • qq有没有群发消息(扣扣有没有群发的功能)

    qq有没有群发消息(扣扣有没有群发的功能)

  • 淘宝预售提醒在哪里看(淘宝预售界面)

    淘宝预售提醒在哪里看(淘宝预售界面)

  • 表格自动换行快捷键(表格自动换行快捷键c)

    表格自动换行快捷键(表格自动换行快捷键c)

  • 抖音和别人合拍设置方法(抖音和别人合拍为什么没有声音)

    抖音和别人合拍设置方法(抖音和别人合拍为什么没有声音)

  • 苹果x可以改双卡吗(苹果x可以改双扬声器吗)

    苹果x可以改双卡吗(苹果x可以改双扬声器吗)

  • 新苹果11什么时候上市(iphone 11多久上市的)

    新苹果11什么时候上市(iphone 11多久上市的)

  • 苹果无线耳机防水吗(苹果无线耳机防水吗?让我洗了)

    苹果无线耳机防水吗(苹果无线耳机防水吗?让我洗了)

  • vivox27pro可以面部解锁吗(vivo x27支持面部识别吗)

    vivox27pro可以面部解锁吗(vivo x27支持面部识别吗)

  • vue3 router配置有关parent报null 的错误问题(vue-router)

    vue3 router配置有关parent报null 的错误问题(vue-router)

  • 最新个税手续费返还会计分录小规模纳税人
  • 增值税认证发票平台可以导出发票明细吗?
  • 税款的汇兑损益如何做账
  • 海运的发票可以抵税吗
  • 销售费用包括啥
  • 附加税减半征收会计分录
  • 购置办公用品有什么好处
  • 临时设施费怎么结算
  • 销售自产设备税率
  • 个税手续费返还会计分录
  • 募捐建议
  • 营改增后众筹融资业务的会计处理分析
  • 增值税普票跨年重开风险
  • 增值税专用发票使用规定 最新
  • 个人付款可以开发票吗
  • 考勤扣款是税前还是税后
  • 2016年的发票可以用到什么时候
  • 税控盘证书密码一天可以输几次
  • 收购全资子公司的账务处理
  • 增值税进项抵扣期限及认证期限
  • 预提固定资产折旧费
  • 出租不动产什么时候交税
  • 其他应付款和其他应交款区别
  • 电脑玩游戏卡怎么弄
  • 苹果手机录音怎么转换成mp3格式
  • 企业所得税纳税标准
  • xp系统电脑关机后又重启怎样处理
  • 如何在 Windows 11 上更改锁屏壁纸
  • 如何禁用win10自动修复
  • 创业补贴的作用
  • WIN7系统如何共享打印机
  • 文竹发黄怎么挽救?
  • 生产员工福利计什么科目
  • php加密文件解密
  • 商业汇票的承兑银行必须具备下列条件
  • php分层架构
  • vue watch监听localstorage变化
  • 增值税专用发票几个点
  • 什么是完税证明?完税证明丢了怎么办公司
  • 报销具体流程
  • 融资租赁方式的条件
  • java 类型推导
  • python解释器的多种使用
  • java基本框架
  • 深入理解jvm第三版pdf百度云
  • 建筑企业预缴的增值税怎么抵扣
  • 劳务报酬需要申报个税吗
  • 小规模企业购入原材料会计分录
  • 单位安装摄像头合法吗
  • 年终奖可以税前扣除吗
  • 农副产品商贸公司如何做账
  • 在建工程前期费用明细
  • 退回备用金在现金怎么办
  • 累计折旧余额在哪方
  • sql查询生成器
  • 遗失的美好什么意思?
  • 联想Thinkpad怎么进入安全模式
  • ssh连接虚拟机centos
  • win7升级win10黑屏
  • linux查看sh
  • fssm32.exe是什么进程 有什么作用 fssm32进程查询
  • Win10 UWP红石版应用商店迎来更新:查找更新再换位置
  • notify.exe - notify是什么进程 有什么用
  • linux gtk+
  • 注册win7账号
  • linux使用curl进行接口测试
  • Android OpenGL ES(三)----编程框架
  • 在bootstrap中,有哪几种导航
  • 主流安卓开发
  • 最简单的游戏开发工具
  • python 邻接表
  • vue cli3 webpack配置
  • node中的ejs
  • 详解杭州亚运会会徽和口号
  • 江苏国税电子税局
  • 广东省国税局长是谁
  • 生活垃圾处理合作协议
  • 煤炭洗选工艺
  • 河北国家税务局官网站
  • 国税手工发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设