前端 vue 怎么下载后端返回的二进制流 excel 表格文件

最新推荐文章于 2025-06-20 11:45:36 发布

雨沫相与

最新推荐文章于 2025-06-20 11:45:36 发布

阅读量255

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue.js excel

本文链接：https://blog.csdn.net/u011933026/article/details/146315705

html:
<a href="#" @click.prevent="downLoad01(row)" style="color: #c00;">下载表格</a>

js:

//下载人员
	async downLoad01(row) {
		const res = await getActiveDetail(row.id);
		console.log('res',res)
		if (res.status == '200') {
			const link = document.createElement('a');
			let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
			let objectUrl = window.URL.createObjectURL(blob);
			link.href = objectUrl;
			link.download = row.name+'报名人员';
			const elementA = document.querySelector('.view-container');
			link.style.display = 'none';
			elementA?.append(link);
			link.click();
			elementA?.removeChild(link);
			window.URL.revokeObjectURL(link.href);
			this.$message.success('下载成功');
			
		} else {
			this.$message.error('下载失败');
		   
		}
	},
	

注意：
接口里面需要加上  ：responseType: 'blob'  类型
export function getExcel(id) {
  return request({
    url: '/xxxx/' + id,
    method: 'post',
	responseType: 'blob'
  })
}


request.js  里面需要判断返回格式

// response interceptor
service.interceptors.response.use(
 
  response => {
	//如果是返回的‘blob’类型，则直接返回
	if(response.config.responseType === 'blob'){
		return  response
	}else{
		//这里是没有判断之前的
		const res = response.data
	
		if (res.code !== 200) {
		  Message({
		    message: res.msg || 'Error',
		    type: 'error',
		    duration: 5 * 1000
		  })
		
		  // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
		  if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code === 403) {
		    // to re-login
		    MessageBox.confirm('您已经退出, 您可以继续呆在当前页面或者重新登录', '确认退出', {
		      confirmButtonText: '重新登录',
		      cancelButtonText: '取消',
		      type: 'warning'
		    }).then(() => {
		      store.dispatch('user/resetToken').then(() => {
		        location.reload()
		      })
		    })
		  }
		  return Promise.reject(new Error(res.msg || 'Error'))
		} else {
		  return res
		}
	}
   
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)