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

探索的小白

已于 2023-06-01 11:21:00 修改

阅读量433

点赞数

文章标签： javascript 前端 html

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

本文链接：https://blog.csdn.net/Smart_Developer/article/details/130235486

版权

浏览器自动下载文件流

页面效果

在这里插入图片描述

页面点击下载方法

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
        })
    },