盘点前端下载功能

开发过程中会遇到下载某个文件或者压缩包，浏览器下载功能基本就是利用<a></a>标签实现的，

为什么用a标签？a标签开始学习的时候不是跳转吗？但是如果a标签的href给的不是一个可访问的地址，而是一个文件，那么浏览器就去解析文件，如果是能解析的就直接打开展示，如果解析不了那么就打包下载。

1、<a href="1.txt" download="1.txt" target="view_window">下载</a>

2、<a href="httpxxxxxxx.txt" download="1.txt" target="view_window">下载</a>

还可以动态生成a标签，然后赛值

let a = document.createElement('a');
a.href = '1.txt';
a.download = '1.txt';
a.click()

道理还是以上的道理。

但是如果后台给的就是一个字符串，但是你就是需要下载的形式呢？

那么用以下方式：

3、

download({接口传参}).then((res) => {

　　　　// download 为调用的接口 res为接口给的内容 可以直接给下面的内容赛值也行

    const blob = new Blob([res]);

    const objectUrl = URL.createObjectURL(blob);

    const a = document.createElement('a');

    document.body.appendChild(a);

    a.setAttribute('style', 'display:none');

    a.setAttribute('href', objectUrl);

    a.setAttribute('download', '文件名.txt');

    a.click();

    URL.revokeObjectURL(objectUrl);

  })

 

上面的比较low，需要前端定义文件名，下面代码取后端设置的文件名，比较合适更多业务场景：

　console.log('下载文件的值，', res)
    const blob = new Blob([res.data])
    const fileName = res.headers['content-disposition'].split(';')
    const filename2 = fileName[1].split('=')
    const filename3 = decodeURIComponent(filename2[1])
    let downloadElement = document.createElement('a')
    let href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = filename3
    // console.log('filename3', filename3)
    document.body.appendChild(downloadElement)
    downloadElement.click()
    document.body.removeChild(downloadElement) //移除元素；防止连续点击创建多个a标签
    window.URL.revokeObjectURL(href)

看需求和具体场景使用哪种方式。