vue下载excel文件的四种方法实例
作者:秋9 发布时间:2024-04-09 10:44:56
标签:vue,下载,excel
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:在新窗口中打开链接;可以在网站上打开另外一个网站的地址。
2、通过 a 标签 download 属性结合 blob 构造函数下载
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)
})
4、使用fetch下载
exportFile() {
fetch('http://127.0.0.1:8765/course/exportCourse/33', {
method: 'GET',
headers: new Headers({
'Authorization': Cookie.get('Authorization')
}),
})
.then(res => res.blob())
.then(data => {
const blobUrl = window.URL.createObjectURL(data);
const a = document.createElement('a');
a.download = this.fileName+'.xlsx';
a.href = blobUrl;
a.click();
});
},
来源:https://blog.csdn.net/jlq_diligence/article/details/124072181
0
投稿
猜你喜欢
- 什么是目标检测目标检测关注图像 * 定的物体目标,需要同时解决解决定位(localization) + 识别(Recognition)。相比分
- 概要:要实现点赞功能,需要实现的有:谁进行的点赞、什么时候进行点赞、点赞的对象是谁、每一个对象的点赞数量是多少、点赞过后还需要能够取消点赞,
- 今天小编来和大家聊一下Python当中的altair可视化模块,并且通过调用该模块来绘制一些常见的图表,借助Altair,我们可以将更多的精
- 1.问题及解决办法(1)问题:由于存储的时间戳是时间戳为GMT(格林尼治标准时间),以秒储存,但由于需要获取的是北京时间,存在时区问题。如何
- 本文实例讲述了Python通过公共键对字典列表排序算法。分享给大家供大家参考,具体如下:问题:想根据一个或多个字典中的值来对列表排序解决方案
- 优化场景利用视图函数(views)查询数据之后可以通过上下文context、字典、列表等方式将数据传递给HTML模板,由template引擎
- 在做自动化测试时,遇到两种情况需要判断usb是否已连接上(注,本文仅针对用adb命令来control手机)一种是在开测时(前提是同时要测试多
- 在OOCSS中怎么定义“对象”?对象类似JAVA中的类,保持着OO的特征。一个CSS对象由4部分组成:可能是一个或多个DOM节点的HTML由
- 异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变
- 最简单的:<textarea name="A" cols="45" rows="2&
- 在SQL Server 2005中,它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本,它是数据库所有数据的映射,由快照
- 相信很多程序员在调试代码时,都用过 print。代码少还好说,如果是大型项目,面对众多 print 的输出结果,可能要头大了。今天推荐一个
- Purge死锁场景说明Purge死锁说明表中存在记录(unique key) 10,20,30,40 (且有 自增主键 ),现在删除记录 2
- sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(l
- ⛳️ 实战场景本篇博客为大家再次带来 Go 语言的基础知识,这次要学习的内容是 Go 中的文件操作。打开关闭文件在 Go 中操作文件,首先要
- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行,并可动态生成普通的HTML网页,然后再传送到客户端供浏览的这一特点。我们要在本机上
- 一、 Scott用户下的表结构SCOTT。是在Oracle数据库中,一个示例用户的名称。其作用是为初学者提供一些简单的应用示例,不过其默认是
- 如下所示:matrix.py#!/usr/bin/python# -*- encoding:UTF-8-*-import pprintimp
- 这里主要是解决multipart/form-data这种格式的文件上传,基本现在http协议上传文件基本上都是通过这种格式上传1 思路一般情
- 一、安装SSL证书的环境Apache安装目录:E:phpStudyPHPTutorialApache以上为windows下测试SSL证书安装