【Vue】vue2请求axios后台接口下载Excel表格文件 实战教程

可直接复制代码拿去用 下载Excel表格方法

我参考了两个作者写的 不过最终实现是通过作者1的博文


两个作者链接↓
参考作者1
参考作者2

请求接口需要添加一个参数参数 responseType: 'blob'

export function downProject() {
	return HttpRequest({
		method: 'get',
		url: "/admin/Export/exportProjectTable", //接口地址
		responseType: 'blob',//必须要加 不加的话会出问题 转化失败或者请求乱码 下面的代码都无效
		//服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认是'json'
	})
}
//如果需要参数就在url后面加,我这个没有传参的要求

BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器。
blob官网
目的:
后端返回的文件是一个blob格式的流文件,需要前端进行转码,得到一个url,实现下载文件的功能


这是vue页面上点击方法的代码↓
我参考作者1写的,然后我加了点注释

// 点击下载
download() {
	// 可以直接复制拿去用 只需要改请求方法即可
	downProject().then((res) => {
		let blob = new Blob([res], {
		// type: 'application/actet-stream;charset=utf-8'
			type: 'application/vnd.ms-excel'
		}); // 构造一个blob对象来处理数据,并设置文件类型
		let a = document.createElement('a'); // 生成一个a标签
		let href = window.URL.createObjectURL(blob); //创建下载的链接
		a.href = href; //指定下载链接
		a.download = '项目表模板' //指定下载文件名
		// a.setAttribute('download', 'fileName')
		document.body.appendChild(a); //把a标签加到页面中
		a.click(); //触发a标签下载
		document.body.removeChild(a); //下载完成移除元素
		window.URL.revokeObjectURL(href); //释放掉blob对象
	})
},

我看了一下代码有用到生成一个a标签,点击a标签可以触发下载并且不跳转页面

a 标签的 download 属性是 HTML5 标准新增的,作用是触发浏览器的下载操作而不是导航到下载的 url,这个属性可以设置下载时使用新的文件名称。
引用作者说的

下载按钮代码贴图

【Vue】vue2请求axios后台接口下载Excel表格文件 实战教程_第1张图片

下载方法代码贴图

【Vue】vue2请求axios后台接口下载Excel表格文件 实战教程_第2张图片

页面代码
【Vue】vue2请求axios后台接口下载Excel表格文件 实战教程_第3张图片

  • 今日份文章 OK

你可能感兴趣的:(Vue,vue.js,javascript,ecmascript,前端)