Vue下载文件功能

import path from 'path'
let baseUrl;//代理地址


/**
 * 下载文件
 * @param {*} filepath 文件请求路径
 * @param {*} filename 文件名称
 */
export function DownFileFile(filepath,filename)
{
    let url=path.join(baseUrl,filepath);
    Axios({
        method:"get",
        url:url,
        responseType:"blob",
        headers:{"Authorization":`Bearer `+getToken()}
    }).then(res=>{
        resolveBlobFilename(res,filename);
    })
}

//Token信息
export function getToken(){
    return "TokenInfo";
}


/**
注意避坑：当返回数据为Blob时，应在请求时配置responseType='blob'，这样返回的才没问题。

request({
	url:'',
	methods:'get',
	responseType:'blob'
})
[避坑指南来源于](https://blog.csdn.net/Gorgio_Liu/article/details/107666098)

*/

/**
 * 解析blob响应内容并下载(传递MIME类型从header获取文件名)
 * @param {*} res 响应内容
 * @param {*} mimeType MIME类型
 */
export function resolveBlob(res,mimeType){
    let blob=new Blob([res.data],{type:mimeType});
    let href=URL.createObjectURL(blob);
    
    let patt=new RegExp("filename=([^;]+\\.[^\\.;]+);*"); //匹配文件名正则表达式
    let resDis=decodeURI(res.headers["content-disposition"]); //从respon的header中获取到文件名的描述
    let filename=patt.exec(resDis)[1]; //获得文件名

    createAlabeload(href,filename);
}

/**
 * 解析blob响应内容并下载(直接传递文件名) 
 * @param {*} res 响应内容
 * @param {*} filename 文件名
 */
export function resolveBlobFilename(res,filename)
{
    let blob=new Blob([res.data]);
    let href=URL.createObjectURL(blob);
    createAlabeload(href,filename);
}


/**
 * 创建下载链接
 * @param {*} href 下载地址
 * @param {*} filename 文件名
 */
export function createAlabeload(href,filename)
{
    const aLink=document.createElement('a');
    aLink.href=href;
    aLink.setAttribute("download",filename);
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
}