a标签下载相关问题和解决方法

解决a标签下载会有缓存的问题

可以添加随机数

	const rand = Math.random(); // 添加随机数 解决下载缓存问题
    const api = `${window.api.baseUrl}/download?id=${id}&token=${token}&${rand}`;
    const link = document.createElement('a');
    
    link.href = api;
    link.target = '_blank';
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();

解决a标签下载，跳转到空标签页很快就关掉，导致在下载页面的控制台看不到下载请求的问题

使用axios发送一个get请求，然后再将返回的data转换为blob对象，在生成blobUrl，再使用a标签下载

const res = await axios.get({
    url:    `/download`,
    params: {
        id: obj.id,
        token:  token,
    },
}, {
    responseType: "blob"
});
const blob = new Blob([res.data], { type: res.response.headers['content-type'] })
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.target = '_blank';
link.style.display = 'none';
document.body.appendChild(link);
link.click();

注意两点：

1. get请求时，要注明responseType：blob
2. 将二进制流转为blob对象的时候，要使用response headers中的content-type指定一下blob的type
3. a标签的href为window.URL.createObjectUrl(blob)的值

== 这样就可以在控制台看到下载文件的请求和响应数据了