位置: 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 低代码开发:接口大师,一套开发、管理和提供接口的产品框架(低代码开发开源)

  • 如何利用软文让你的产品广告上百度首页(如何利用软文让客户满意)

    如何利用软文让你的产品广告上百度首页(如何利用软文让客户满意)

  • 1688能退货吗(1688能退换货吗)

    1688能退货吗(1688能退换货吗)

  • 微信群主删除并退出群还在吗(微信群主删除并退出群怎么恢复)

    微信群主删除并退出群还在吗(微信群主删除并退出群怎么恢复)

  • 荣耀20Pro充电提示音在哪里设置(荣耀20Pro充电提示都有几种)

    荣耀20Pro充电提示音在哪里设置(荣耀20Pro充电提示都有几种)

  • 小米手机无痕浏览模式怎么关闭(小米手机无痕浏览怎么找到浏览记录)

    小米手机无痕浏览模式怎么关闭(小米手机无痕浏览怎么找到浏览记录)

  • 电脑显示正在关机却一直关不掉,怎么办?(电脑显示正在关闭程序并关机点取消后电脑图标怎么办)

    电脑显示正在关机却一直关不掉,怎么办?(电脑显示正在关闭程序并关机点取消后电脑图标怎么办)

  • i59400配什么主板(i59400配什么主板最佳)

    i59400配什么主板(i59400配什么主板最佳)

  • 抖音看好友在线怎么设置(抖音看好友在线怎么没有了)

    抖音看好友在线怎么设置(抖音看好友在线怎么没有了)

  • 快手最多可以关注多少人(快手最多可以关注多少个好友)

    快手最多可以关注多少人(快手最多可以关注多少个好友)

  • 手机怎么查看wifi有几个人用(手机怎么查看wifi速度)

    手机怎么查看wifi有几个人用(手机怎么查看wifi速度)

  • 电脑长时间开机的危害(电脑长时间开机后自动关机)

    电脑长时间开机的危害(电脑长时间开机后自动关机)

  • 怎么把日期改成斜杠(怎么把日期改成星期几)

    怎么把日期改成斜杠(怎么把日期改成星期几)

  • 充电是什么能转化为什么能(充电时电能转换成什么能?)

    充电是什么能转化为什么能(充电时电能转换成什么能?)

  • 什么叫以附件形式发送(什么叫以附件形式发送到qq邮箱)

    什么叫以附件形式发送(什么叫以附件形式发送到qq邮箱)

  • 怎么将几个视频连接在一起(怎么将几个视频压缩成一个文件)

    怎么将几个视频连接在一起(怎么将几个视频压缩成一个文件)

  • 内存储器主要用于(内存储器主要用于存放什么的数据)

    内存储器主要用于(内存储器主要用于存放什么的数据)

  • 手机如何屏蔽短信(手机如何屏蔽短信骚扰)

    手机如何屏蔽短信(手机如何屏蔽短信骚扰)

  • 手机上怎么下载小说到mp4(手机上怎么下载歌曲到u盘)

    手机上怎么下载小说到mp4(手机上怎么下载歌曲到u盘)

  • 中国code是多少(中国代码是多少)

    中国code是多少(中国代码是多少)

  • macOS Big Sur 公测版Beta 2升级方法(macos big sur 怎么样)

    macOS Big Sur 公测版Beta 2升级方法(macos big sur 怎么样)

  • Windows7旗舰版系统任务栏QQ图标不显示的解决方法(我告诉你win7旗舰版)

    Windows7旗舰版系统任务栏QQ图标不显示的解决方法(我告诉你win7旗舰版)

  • 目的税包括
  • 个税分类所得税率
  • 金蝶eas怎么用
  • 增值税普票可以开给个人吗
  • 退税发票误勾选怎么撤销
  • 增值税科目年末结转可以吗
  • 规划设计合同需要缴纳印花税吗为什么
  • 进口增值税电子税单抵扣
  • 生产车间领用低值易耗品
  • 收取不合规发票怎么处理
  • 简易计税项目税金要计入成本吗
  • 包工包料和包清工
  • 先转款后开票会计分录
  • 支付宝转账到银行卡多久到账
  • 发票逾期未认证个人要承担责任吗
  • 个体户一般纳税人和小规模的区别
  • 发票开错地方教育费附加多交了可以冲掉吗?
  • 增值税税控盘抵减
  • 跨境税法
  • 现金流量表右边
  • 现金福利需要发票吗
  • 银行手续费回单可以作为报销
  • 政府收购企业资产规定
  • 出口的增值税到底怎么算的
  • 设备租赁收入属于什么收入
  • 个人缴纳公积金有什么好处
  • cpu不支持vt怎么办
  • 基建项目类型填什么
  • bios里面怎么设置中文
  • 生产税有哪些
  • 服务成本怎么处理
  • 业务招待费汇算清缴扣除标准
  • 公司已经控股一年怎么办
  • hpptd.exe
  • linux架构师是做什么的
  • Micheldever Wood的蓝铃花,英国汉普郡 (© Hursley/Getty Images Plus)
  • 发票已认证当月未申报怎么办
  • 借款是经营性负债吗
  • 应付福利费和应付职工薪酬的关系
  • 基础代谢
  • 专项应付款转资本公积需要什么附件
  • 进项税额大于销项税额会计分录
  • 增值税报了所得税未报可以买发票吗
  • 广告代理费制度
  • 不缴纳增值税
  • 盘盈的存货账务怎么处理
  • 新医院会计制度采用什么预算方法
  • 医院交什么保险
  • 劳动报酬收入包含什么
  • 企业所得税税前扣除项目有哪些
  • 困难企业社保费返还
  • 无法收回的款项怎么记账
  • 损益类所得税费用
  • 对方公司收钱不开发票怎么办
  • 交易性金融资产属于什么科目
  • sql语句大全实例教程
  • 升级完鸿蒙系统5G咋没有了
  • win8.1鼠标没反应
  • 安装完xp系统直接蓝屏怎么办
  • windows下怎么安装mac
  • WINDOWS操作系统属于什么操作系统
  • w7系统怎么添加打印机
  • mxtask.exe - mxtask是什么进程文件 有什么用
  • win10老是弹提示
  • 深入理解rcu
  • 使用shell脚本实现自动化软件部署
  • jquery制作图片提示效果
  • Node.js中的什么模块是用于处理文件和目录的
  • 噩梦act2
  • zigzag源码
  • python爬虫的几种方法
  • unity火球特效
  • js对象属性值
  • 收到123660的短信是什么意思
  • [转]决算中甲供材如何扣除?
  • 北京地方税务局电话
  • 商铺转让费怎么开票项目
  • ca登录的用户名和密码分别是什么
  • 东风小康和重庆金康
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设