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

  • 唯品会快捷支付怎么取消绑定(唯品会快捷支付平台)

    唯品会快捷支付怎么取消绑定(唯品会快捷支付平台)

  • 喜马拉雅怎么录制自己的作品(喜马拉雅怎么录音赚钱)

    喜马拉雅怎么录制自己的作品(喜马拉雅怎么录音赚钱)

  • 映客怎么赚钱(映客怎么赚钱一天收入)

    映客怎么赚钱(映客怎么赚钱一天收入)

  • qq里bz是什么意思(扣扣b是什么意思)

    qq里bz是什么意思(扣扣b是什么意思)

  • ipad个人热点怎么开(iPad个人热点怎么连接)

    ipad个人热点怎么开(iPad个人热点怎么连接)

  • 旺旺ld是什么意思(旺旺ld是什么在哪里找)

    旺旺ld是什么意思(旺旺ld是什么在哪里找)

  • vivox系列有几款(vivos16的优缺点)

    vivox系列有几款(vivos16的优缺点)

  • 手机卡顿是处理器还是内存(手机卡顿是处理器老化了吗)

    手机卡顿是处理器还是内存(手机卡顿是处理器老化了吗)

  • oppo手机有防窥屏功能吗(oppo手机有防窥屏怎么设置)

    oppo手机有防窥屏功能吗(oppo手机有防窥屏怎么设置)

  • 手机充不进电小米(手机充不进电小米9)

    手机充不进电小米(手机充不进电小米9)

  • 腾讯会议断开音频会被发现吗(腾讯会议断开音频会开麦吗)

    腾讯会议断开音频会被发现吗(腾讯会议断开音频会开麦吗)

  • 小米手环一直提示请先绑定(小米手环一直提醒短信正在运行)

    小米手环一直提示请先绑定(小米手环一直提醒短信正在运行)

  • ipadpro支持无线充电吗(ipad pro支持无线吗)

    ipadpro支持无线充电吗(ipad pro支持无线吗)

  • 快手号TA是什么意思

    快手号TA是什么意思

  • 抖音移除粉丝能恢复关注吗(抖音移除粉丝能恢复吗)

    抖音移除粉丝能恢复关注吗(抖音移除粉丝能恢复吗)

  • 为什么300m的网速只有100m(为什么300m的网只有3m)

    为什么300m的网速只有100m(为什么300m的网只有3m)

  • 华为耳机左耳机不响(华为耳机左耳机不显示电量)

    华为耳机左耳机不响(华为耳机左耳机不显示电量)

  • 手机如何下载电视剧(手机如何下载电视剧全集)

    手机如何下载电视剧(手机如何下载电视剧全集)

  • ipada1709是几代(ipad型号a1709是几代)

    ipada1709是几代(ipad型号a1709是几代)

  • ipad air和mini区别(ipad mini和ipad air区别)

    ipad air和mini区别(ipad mini和ipad air区别)

  • ps辅助线怎么删除(ps辅助线怎么删除一条)

    ps辅助线怎么删除(ps辅助线怎么删除一条)

  • 户户通如何恢复出厂设置(户户通如何恢复安装数据)

    户户通如何恢复出厂设置(户户通如何恢复安装数据)

  • 华为nemal00什么型号(华为ne0-al00)

    华为nemal00什么型号(华为ne0-al00)

  • 微录客为什么没有了(现在还有微录客的软件吗)

    微录客为什么没有了(现在还有微录客的软件吗)

  • 八代cpu能装win7吗(8代cpu能装win11吗)

    八代cpu能装win7吗(8代cpu能装win11吗)

  • qq昵称旁边的小耳朵(qq昵称旁边的小船)

    qq昵称旁边的小耳朵(qq昵称旁边的小船)

  • 拉黑和删除的显示区别(拉黑删除的显示)

    拉黑和删除的显示区别(拉黑删除的显示)

  • 新企业所得税季初资产总额
  • 有税控盘怎么领发票
  • 怎么看自己公司是一般纳税人还是小规模纳税人
  • 税控技术维护费每年都能抵扣吗
  • 工地工资是人走账清吗
  • 认购私募股权基金
  • 打款金额少于开票金额
  • 没有订立合同的著作权属于什么人
  • 个体户个人所得税税率表2023计算
  • 重疾险可以扣税吗
  • 危险废物处理费用发票怎么开
  • 营改增通知规定的税收优惠政策
  • 差额开票扣除额可以大概数
  • 房地产预缴增值税税率是多少
  • 折价购买债券是什么意思
  • 超过认证期限的发票还能认证吗
  • 存货变卖残值取得的收益计入哪个科目
  • 福利费专票进项抵扣转出怎么做账
  • 支付装修押金会退吗
  • 企业抵押贷款手续办理流程
  • 公司原因领不了失业保险要赔偿吗
  • win10 专业版 企业版
  • 新买的电脑如何激活windows
  • 苹果手机把旧手机的照片传到新手机
  • 牛肉炖萝卜的做法高压锅
  • 拍卖有抵押的车子怎么处理
  • 一般纳税人差额征税申报表怎么填
  • 赠送客户商品分录
  • php析构方法怎么用
  • nohup命令挂不上 每次都直接退出
  • linux mail命令详解
  • 不征税收入的账务处理
  • vue文件下载功能
  • 为什么其他权益工具投资不计提减值准备
  • 物流企业会计核算的具体内容包括
  • 残保金工资总额包括什么
  • php decbin
  • 小规模纳税人营业额
  • 技术服务型公司如何做账务处理
  • 固定资产的货币时间价值
  • 可以现金结算的业务
  • sqlserver2008sa用户不能登录
  • 购入固定资产款项未付
  • 出口报关金额怎么算
  • 原材料出库怎么做分录
  • 代扣代缴公积金现金流量
  • 如何申请增值税留抵退税
  • 增值税发票当月能红冲吗
  • 收回理财款会计分录
  • 现金不够老板垫钱怎么办
  • 收购分公司有什么要求
  • 差旅费借记什么科目
  • 商贸企业的销售成本怎么算
  • 企业注销以后
  • 企业利润率计算公式是怎样的
  • 安卓系统强制竖屏
  • win10 发布
  • linux怎么用命令
  • 在linux操作系统中,/etc/rc.d/init.d
  • win7系统如何提升开关机速度
  • google chrome windows 10
  • linux bash sh
  • win7电脑显示屏显示不全怎么调整
  • win7系统资源管理器无响应
  • win10以太网属性为空白怎么办
  • 第三方解决方案
  • 了不起的狐狸爸爸
  • 同一个文件夹中的文件可以同名吗
  • 微软官方app
  • python中数字运算
  • jquery和html的关系
  • unity3d脚本怎么用
  • jQuery使用getJSON方法获取json数据完整示例
  • javascript中数组的方法
  • 谷歌的全球化发展战略
  • 电子税务局官网江西省
  • 松原江北小吃一条街
  • 上缴财政总额是什么意思
  • 供热基础设施配套费
  • 城镇土地使用税的计算公式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设