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流文件及设置下载文件名的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue加载html5动画(vue实现旋转木马动画)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- mongovue的使用
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- vue时间转换(vue如何动态实时的显示时间浅析)
- vuevlog制作软件(Vue实现Dialog封装)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
- 做网红真的很能赚钱吗(做网红真的很能赚钱吗)
- 10句英语常用(英语常用900句)
- 爱情能当饭吃吗(爱情能当饭吃吗说说)
- 白T恤穿法(白t恤)
热门推荐
- sqlserver怎么调成混合登录(如何快速删掉SQL Server登录时登录名下拉列表框中的选项)
- idea向数据库中插入中文报错(Idea连接MySQL数据库出现中文乱码的问题)
- python人脸识别库(20行python代码实现人脸识别)
- phpstudy的mysql无法启动(Windows系统下解决PhPStudy MySQL启动失败问题)
- axios实现原理(项目中Axios二次封装实例Demo)
- JS实现金额大小写转换
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- apache和yii域名配置(yii框架数据库关联查询操作示例)
- 织梦cms怎么调用(织梦CMS采集时keywords字段无法添加过滤规则的解决方法)
- 腾讯云服务器安装需要什么(免费的云服务器怎么申请?腾讯云服务器的申请流程)