前端文件下载总结

1、通过post接口获取blob二进制流。js将获取到的blob转化成url.赋值给a标签，浏览器识别到blob格式的url,将自动下载数据。

优点：token校验和参数将丢在body里面，无法抓包获取用户的token。

缺点：通过post获取blob,因为是http网络请求，用户无法感知当前下载进度；需要下载的文件过大，再下载完全文件之前，浏览器会一直存储blob,导致越来越慢，有撑爆的可能；再下载完之前，用户刷新页面，会导致之前的存储的blob 丢失。

axios请求设置：

return service({

        url: '/xxxx/url',

        method: 'post',

        responseType: 'blob',//表明接受二进制流数据

        data   

})

下载代码：

let url = window.URL.createObjectURL(new Blob([blob])) ;

let link = document.createElement('a'); 

link.download = 'xxx.png' ;

link.style.display = 'none' ;

link.href = url ;

document.body.appendChild(link) ;

link.click() ;

document.body.removeChild(link) ;

window.URL.revokeObjectURL(url);

2、通过get方式下载文件

优点：点击下载之后，浏览器将接管下载的流程，展示下载的进度。用户刷新不影响浏览器已经接管的任务。

缺点：数据传参将附在url之上，抓包可能会获取到用户的token信息。

export const downloadFileByUrlIframe = (url, triggerDelay, removeDelay) =>{

  setTimeout(() => {

    const iframe = document.createElement("iframe");

    iframe.style.display = "none";

    iframe.style.height = 0; 

    iframe.src = url;

    document.body.appendChild(iframe);

    setTimeout(() => {

      iframe.remove();

    }, removeDelay); 

}, triggerDelay);}