前端下载/导出文件的几种常用方法对比

前言

在前端网页中，这是一个极其普遍的需求，所以总结一下，方便日后提高工作效率

1.window.open或者window.location.href

let url = '/api/dhr/test_reports/download';
window.open(`${url}?session=${session}&staff_id=${query.staff_id}`, "_blank")

优点：简单方便直接

缺点：1.会出现URL长度限制的问题

           2.无法知道下载进度

          3.浏览器可以直接浏览的文件类型是不提供下载的，如txt，png，jpg，gif等

          4.不能添加header信息，也就不能进行鉴权

2.a标签的download

<a target="_blank" download=”aaa”
    href={`/api/dhr/projects_staffs_perform/download_template?    
    session=${token}&project_id=${projectId}`}>
<p>下载标准 Excel 模板</p></a>

优点：能解决不能直接下载浏览器可浏览的文件

缺点：得已知下载文件的地址

          不能下载跨域下的浏览器可以浏览的文件

          有兼容性，特别是IE

          不能鉴权

3.利用blob对象

该方法跟a标签的优势在于，它除了能利用已知文件地址路径进行下载外，还可以通过发送ajax请求api获取文件流进行下载

利用blob对象可以将文件流转化成Blob二进制对象,在safari浏览器*问Blob url是有缺陷的，如下文中通过URL.createObjectURL生成链接

进行下载的思路很简单，发请求获取二进制数据，转为Blob对象 利用URL.createObjectURL生成URL地址，赋值在a标签的href属性上 结合download属性进行下载

该方法不能缺少a标签的download属性因为发送请求的事件设置返回的数据类型为Blob,所以target.response就是一个blob对象，打印出来会看到两个属性size和type，虽然type属性指定了文件的类型吗，但是为了稳妥，还是要在download属性上指定文件后缀

//通过ajax获取二进制数据
export const exportPageToPdf = (query) => {
   return axios('/api/export-page-pdf, {
   params: {
    session: Cookies.get('dhr_b_token'),
   },
   responseType: 'arraybuffer',
  })
  .then((res) => {
   return new Blob([res.data]);
  })
  .then((data) => {
   return window.URL.createObjectURL(data);
 });
}

调用
exportPageXls({
    session: Cookies.get('dhr_b_token'),
})
.then((url) => {
    this.download(url,'盘点数据', 'xlsx');
})
.catch((err) => {
    Toast.info('文件下载失败。');
});

创建a标签给href属性赋值
download = (blobUrl, filename, suffix) => {
    let a = document.createElement('a');
    a.style.display = 'none';
    a.download = `${filename}_建模报告.${suffix}`;
    document.body.appendChild(a);
    a.href = blobUrl;
    a.click();
    document.body.removeChild(a);
};

优点：能解决不能直接下载浏览器可浏览的文件

          可以知道下载进度

          可以设置header

缺点：兼容性问题。IE10以下不可用，safari浏览器可以留意下使用情况

4.利用base64

跟blob大同小异，基本思路差不多，唯一不同的是上面是利用Blob对象生成Blob URL 而这里是生成Data URL（base64编码后的url形式）

ajax获取
export const exportPageXls = (query) => {
    let url = '/api/dhr/talent_excel/download';
    return axios(url, {
        params: query,
        responseType: 'arraybuffer',
    })
    .then((res) => {
        let blob=new Blob([res.data]);//{size:11111,type:’’}
        let fileReader = new FileReader()
        fileReader.readAsDataURL(blob) //将blob变成base64
        return fileReader
})
}

调用
exportPageXls({
    session: Cookies.get('dhr_b_token'),
})
.then((fileReader) => {
    this.download(fileReader,  '盘点数据', 'xlsx');
})
.catch((err) => {
    Toast.info('文件下载失败。');
});

创建a标签
download = (fileReader, filename, suffix) => {
    fileReader.οnlοad=function(){
    let a = document.createElement('a');
    a.style.display = 'none';
    a.href = this.result; //base64
    a.download = `${filename}.${suffix}`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
};

优点：跟blob一样

缺点：兼容性，IE10以下不可用

 

以上就是常用的前端下载方法，后续有好的方式还会继续补充！