vue3文件下载功能

在项目中用到文件下载功能，记录一下.

一.步骤

1.template里写一个a标签

<a @click="exportBtn(record.id)"> 导出 </a>

2.方法传参,请求接口.

import ltExhibitinfoApi from '@/api/biz/ltExhibitinfoApi'
const exportBtn = (id) => {
	let params = {
		id: id
	}
	ltExhibitinfoApi.ltExhibitinfoExport(params).then((res) => {
        //对请求回来的数据进行处理
		const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
		const contentDisposition = res.headers['content-disposition']
		const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
		const $link = document.createElement('a')
		$link.href = URL.createObjectURL(blob)
		$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
		$link.click()
		document.body.appendChild($link)
		document.body.removeChild($link) // 下载完成移除元素
		window.URL.revokeObjectURL($link.href) // 释放掉blob对象

	})
}

3.请求里一定要加responseType: ‘blob’

import { baseRequest } from '@/utils/request'
const request = (url, ...arg) => baseRequest(`/biz/exhibitinfo/` + url, ...arg)
export default {
    // 导出按钮
    ltExhibitinfoExport(data) {
        // 一定要加 responseType
        const options = {
            responseType: 'blob'
        }
        return request('getArtZip', data, 'get', options)
    },

}

二.遇到的问题

1.decodeURIComponent(patt.exec(contentDisposition)[1])为空,找不到content-disposition字段

解决方案:

// 如果获取不到 content-disposition 字段  需要后端做以下配置。
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
response.setHeader("Content-Disposition","attachment;filename="+fileNameEncoder);
注意大小写，都是Content-Disposition。