浏览器自动下载后端返回的文件流

原创已于 2023-06-01 11:21:00 修改 · 661 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2023-04-19 09:06:37 首次发布

文章描述了一个前端实现文件下载的流程，通过点击页面按钮触发download方法，该方法调用axios接口获取文件流。利用接口返回的content-disposition头信息设置文件名，将文件流转换为Blob对象，创建并模拟点击a标签来触发浏览器下载。整个过程涉及HTTP响应类型设置为blob。

浏览器自动下载文件流

页面效果

在这里插入图片描述

页面点击下载方法

download(row) {
	// 调用接口获取文件流
	const res = newyqaxios.downloadFile({ywh:row.ywh})
	//处理文件流设置浏览器下载路径
	let fileName = res.headers["content-disposition"].split("filename=")[1]
	let fileHref = window.URL.createObjectURL(new Blob([res.data]))
	// 模拟点击下载
	var downloadElement = document.createElement("a")
	downloadElement.href = fileHref
	downloadElement.download = decodeURIComponent(fileName)
	document.body.appendChild(downloadElement)
	downloadElement.click()
	document.body.removeChild(downloadElement)
	window.URL.revokeObjectURL(fileHref)
}

调用接口获取文件流

//归档办件下载附件材料
    downloadFile(params) {
        return axios.request({
            url: MICRO_CONFIG.homestead_approve + 'zhgl/bjdowmload/downloadFile',
            method: 'get',
            params: params,
            responseType: 'blob'//注意这里下载获取文件流type
        })
    },