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

  • 联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

    联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

  • 微信怎么开启收款语音提示(微信怎么开启收款声音提示)

    微信怎么开启收款语音提示(微信怎么开启收款声音提示)

  • 支付宝提升芝麻分的方法有哪些(支付宝怎么快速提升芝麻粒)

    支付宝提升芝麻分的方法有哪些(支付宝怎么快速提升芝麻粒)

  • 微信聊天记录多久以前的不能恢复(微信聊天记录多个人一起删)

    微信聊天记录多久以前的不能恢复(微信聊天记录多个人一起删)

  • 红米k30pro怎么截屏(红米k30pro怎么截屏长图片)

    红米k30pro怎么截屏(红米k30pro怎么截屏长图片)

  • 微信被一个人举报就能封号吗(微信被一个人举报后果)

    微信被一个人举报就能封号吗(微信被一个人举报后果)

  • 微信按住说话不能用怎么办(微信按住说话不在中间)

    微信按住说话不能用怎么办(微信按住说话不在中间)

  • 修改手机ip地址后果

    修改手机ip地址后果

  • 为什么电脑蓝屏(为什么电脑蓝屏打不开)

    为什么电脑蓝屏(为什么电脑蓝屏打不开)

  • xbox360 e版s版区别(xbox360e版s版区别 图示)

    xbox360 e版s版区别(xbox360e版s版区别 图示)

  • 小米摄像头自己转动是怎么回事(小米摄像头自己动)

    小米摄像头自己转动是怎么回事(小米摄像头自己动)

  • 通话黑屏怎么关闭(通话黑屏怎么关闭OPPO)

    通话黑屏怎么关闭(通话黑屏怎么关闭OPPO)

  • 如何查看qq绑定了哪些应用?(如何查看qq绑定的手机号)

    如何查看qq绑定了哪些应用?(如何查看qq绑定的手机号)

  • 微信头像模糊是拉黑了吗(微信头像模糊是何原因)

    微信头像模糊是拉黑了吗(微信头像模糊是何原因)

  • 电话通话记录能查多长时间的(电话通话记录能查到通话内容吗)

    电话通话记录能查多长时间的(电话通话记录能查到通话内容吗)

  • 笔记本电脑1t什么意思(笔记本1t用处大吗)

    笔记本电脑1t什么意思(笔记本1t用处大吗)

  • 华为哪几款手机支持otg(华为哪几款手机值得买)

    华为哪几款手机支持otg(华为哪几款手机值得买)

  • 手机网站劫持怎么处理(手机网页劫持)

    手机网站劫持怎么处理(手机网页劫持)

  • 嘀嗒怎么申诉解封(嘀嗒怎么解封账号)

    嘀嗒怎么申诉解封(嘀嗒怎么解封账号)

  • 拼多多连续抽奖关闭在哪里(拼多多连续抽奖怎么取消)

    拼多多连续抽奖关闭在哪里(拼多多连续抽奖怎么取消)

  • 花椒直播怎么提现(花椒直播怎么提现2022)

    花椒直播怎么提现(花椒直播怎么提现2022)

  • iphone11如何分期(苹果11分期付款到底是怎么分期的)

    iphone11如何分期(苹果11分期付款到底是怎么分期的)

  • 分屏功能怎么用(一加分屏功能怎么用)

    分屏功能怎么用(一加分屏功能怎么用)

  • 苹果耳机怎么清理(苹果耳机怎么清洁)

    苹果耳机怎么清理(苹果耳机怎么清洁)

  • 手机反向充电伤电池吗(手机反向充电能给什么手机充电)

    手机反向充电伤电池吗(手机反向充电能给什么手机充电)

  • pr速度曲线在哪(pr2019速度曲线在哪)

    pr速度曲线在哪(pr2019速度曲线在哪)

  • 火山视频怎么增加火力(火山视频如何增加火力)

    火山视频怎么增加火力(火山视频如何增加火力)

  • 微信越用越大怎么办(微信越用越大怎么清理)

    微信越用越大怎么办(微信越用越大怎么清理)

  • Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)(js时间格式转换时间戳)

    Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)(js时间格式转换时间戳)

  • 金税盘开票软件密码忘记怎么办
  • 出口发票开错了如何处理
  • 建筑业差额纳税怎么算
  • 营业外收入做销项税调整
  • 个税为负数如何申报
  • 什么时候库存商品什么时候主营业务收入
  • 取暖费扣个人所得税吗
  • 应收账款项目分析思维导图
  • 应纳税额滞纳金
  • 企业财产损失审批前后的账务处理
  • 个人借款利息是多少才合法
  • 折扣为负数是什么意思
  • 当月勾选认证的原材料与当月领用的原材料区别
  • 收款收据是否可以做账
  • 没有抵扣怎么办
  • 资本公积科目余额能出现小数吗
  • 公司提供职工午餐违法吗
  • 免征政府性基金预缴税款
  • 经济补偿金如何计税
  • 事业编年底
  • 金税盘的年费怎么做抵扣帐
  • 广告公司可以开服务费吗
  • 税控盘的购买流程
  • 营改增的重点是什么
  • 关注!这两种情况下可免征增值税!
  • 预缴企业所得税分录
  • 跨年度的成本费用发票怎么入账
  • 资源税扣缴义务人代扣代缴税款的纳税义务发生时间
  • 企业所得税季报资产总额怎么填
  • 统一社会信用代码查询和税号一致吗
  • 个税经营所得预扣预缴
  • 卷烟批发环节消费税计算
  • 应收账款现金折扣计入什么科目
  • 生产成本期末余额在贷方
  • win10更新kb5006670
  • 山茶花的养殖方法盆栽
  • url传变量
  • 增值税防伪税控系统
  • Access-Control-Expose-Headers 响应报头、跨域 公开响应头
  • 数字图像处理-应用篇
  • import vue from vue报错
  • javaweb界面设计
  • openprop教程
  • ulimit设置不生效
  • 场外期权怎么交税
  • 现销和赊销对利润质量的影响
  • 收到增值税收入423300,款项已存入国库
  • 主营业务成本大于主营业务收入怎么办
  • 研发支出是什么性质的科目
  • 有限合伙企业如何报税
  • 转出未交增值税借方余额表示什么
  • 电费已支付未充值
  • 留抵税额抵减欠税滞纳金
  • 机物料消耗计入什么费用
  • 费用票可以抵扣多少企业所得税
  • 项目过路费应该挂什么科目
  • 印花税退还
  • mac可以上qq但是打不开网页
  • 无法ping通虚拟机
  • 浪潮云是什么意思
  • server.exe是什么
  • 文件选项夹在哪里
  • 怎么关闭win10升级
  • win10个性化颜色在开始任务栏选不了
  • win8打不开咋办
  • javascript之Array 数组对象详解
  • data.table
  • django图片加载不出来
  • 远程计算机的命令
  • go 与 python
  • python3m
  • 面向对象设计六大原则
  • python生产
  • 带领大家学习javascript基础篇(一)之基本概念
  • 云南地方税务局电话
  • 昆山华润燃气多少钱一方
  • 房子办不了产权
  • 车辆购置税查询不到应征欠税信息,不能进行扣款操作
  • 诺诺网电子发票下载到手机
  • 个体工商户银行卡是对公还是对私
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设