前端下载、改变文件名简单实现

背景

直接通过三方链接下载的文件名存在乱码，怎么能够实现自定义文件名呢？

场景一： 同源场景下 通过创建a标签实现

export const downLoad = (url:string, fileName:string)=>{
    const elink = document.createElement('a'); 
    elink.style = 'display: none'; // 创建一个隐藏的a标签
    elink.download = fileName;//要替换的文件名称
    elink.href = url;
    document.body.appendChild(elink);
    elink.click(); // 触发a标签的click事件
    document.body.removeChild(elink);
}

场景二：不同源

跨域情况下，a标签中的download属性失效，无法直接通过download属性改变文件名称

需要确保 下载的三方链接是允许跨域请求

export const dowmload = (url:string, fileName:string )=>{
     const xhr = new XMLHttpRequest();
     xhr.open('GET',url,true);
     xhr.responseType = 'blob';
     xhr.onload = ()=>{
        if(xhr.status === 200){
            const blob = new Blob([xhr.reponse]);
            const elink = document.createElement('a'); 
            const href = window.URL.createObjectURL(blob); 
            elink.href = href; 
            elink.download = fileName; //重置的文件名称
            document.body.appendChild(elink); 
            elink.click(); 
            document.body.removeChild(elink);
            window.URL.revokeObjectURL(href);
        };
     };
     xhr.send();
};

zkcd-vds 2023.08.03