vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
类别:编程学习 浏览量:546
时间:2022-04-02 16:53:20 vue导出动态的excel功能
vue中如何下载excel流文件及设置下载文件名目录
- 概述
- 1、通过 url 下载
- 2、通过 a 标签 download 属性结合 blob 构造函数下载
- 3、通过 js-file-download 插件
导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图:
现总结如下几种处理方法。
1、通过 url 下载即后端提供文件的地址,直接使用浏览器去下载
通过window.location.href = 文件路径下载
window.location.href = `${location.origin}/operation/ruleImport/template`
通过 window.open(url, '_blank')
window.open(`${location.origin}/operation/ruleImport/template`)
这两种使用方法的不同:
- window.location:当前页跳转,也就是重新定位当前页;只能在网站中打开本网站的网页。
- window.open:在新窗口中打开链接;可以在网站上打开另外一个网站的地址。
a 标签的 download 属性是 HTML5 标准新增的,作用是触发浏览器的下载操作而不是导航到下载的 url,这个属性可以设置下载时使用新的文件名称。
前端创建超链接,接收后端的文件流:
axios.get(`/operation/ruleImport/template`, { responseType: "blob" //服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认是'json' }) .then(res => if(!res) return const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据,并设置文件类型 if (window.navigator.msSaveOrOpenBlob) { //兼容IE10 navigator.msSaveBlob(blob, this.filename) } else { const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象 const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = href // 指定下载链接 a.download = this.filename //指定下载文件名 a.click() //触发下载 URL.revokeObjectURL(a.href) //释放URL对象 } // 这里也可以不创建a链接,直接window.open(href)也能下载 }) .catch(err => { console.log(err) })
注:请求后台接口时要在请求头上加{responseType: 'blob'};download 设置文件名时,可以直接设置扩展名,如果没有设置浏览器将自动检测正确的文件扩展名并添加到文件。
3、通过 js-file-download 插件安装:
npm install js-file-download --S
使用
import fileDownload from 'js-file-download' axios.get(`/operation/ruleImport/template`, { responseType: 'blob' //返回的数据类型 }) .then(res => { fileDownload(res.data, this.fileName) })
以上就是vue中如何下载excel流文件及设置下载文件名的详细内容,更多关于vue中下载excel流文件及设置下载文件名的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vuetable表格合并(vue-table实现添加和删除)
- vue怎么实现拖动(Vue拖动截图功能的简单实现方法)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vue路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
- ()
热门推荐
- php闰年计算公式(php判断/计算闰年的方法小结三种方法)
- react的事件绑定(React事件绑定的方式详解)
- think php上传服务器(ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例)
- php运用redis实现抢购实例(PHP+redis实现微博的拉模型案例详解)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- jquery解析xml
- html5标签怎么做(html5用video标签流式加载的实现)
- python怎么输出一个矩阵(python实现转圈打印矩阵)
- zabbix5.4监控磁盘可用内存大小(解析Zabbix 5.0磁盘自动发现和读写监控的问题)
- 如何选择自己的网站服务器(网站应该选择哪种服务器比较好?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9