前端下载

发表于 | 分类于 ， ， | 阅读次数：
文件下载的知识总结

一. 标签下载

  1. 一般我们会像下面这样动态创建标签，并为他追加下载链接和【fileName + fileType】
  2. 这里的【fileName + fileType】可选 不过当你 是下载图片资源或是pdf 那么最好加上
  3. 适合没有添加权限验证的服务器资源文件 (没有token)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function download(url,fileName){
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

二. 请求数据流的方式

  1. downloadFile方法其实和上一个便签的下载差不多，详细介绍看注释
  2. exportEmp方法是axios封装过的
  3. 适合添加了token验证的资源文件
  4. 使用axios的同学，记得设置responseType: ‘blob’
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // exportEmp(params){
      // return 
      // request({
      //     url: `xxxx`,
      //     method: 'get',
      //     params,
      //     responseType: 'blob'
      // })
    // }
      exportEmp(url,{params})
        .then(res=>{
          downloadFile(res);
        })
        .catch(err=>{ console.log(err);})

      function downloadFile(fileInfo) {
        const link = document.createElement('a');
        // 获取文件名   
        let name = fileInfo.headers['content-disposition'].split(";")[1].split("filename=")[1]
                    .slice(1,-1);// 去除文件名两端双引号
        // 浏览器返回来的文件名是乱码的 ISO8859-1,我们要将其转换成utf-8格式 
        // 这里卡了很久 找了 很多资料也没有办法,最后我老大还是我老大
        let fileName = Buffer.from(name, 'ascii').toString('UTF-8');
        // 将数据流整合 
        let blob = new Blob([fileInfo.data], { type: fileInfo.data.type });
        
        link.style.display = 'none';
        // 创建本地下载链接
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }

三. 标签下载并携带token

  1. 这里和上面的并不一样，我直接将代码贴过来吧，你试试能不能访问
  2. 在线演示
  3. 可以向下翻翻作者的解决办法就是第二种
  4. 可以设置请求头，那么就可以添加token(但是我没弄成 用的axios)
1
2
<!-- placeholder , `click` download , `.remove()` options , at js callback , following js -->
<a>download</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function () {
    $.ajax({
        // `url` 
        url: '/echo/json/',
        type: "POST",
        dataType: 'json',
        // `file`, data-uri, base64
        data: {
            json: JSON.stringify({
                "file": "data:text/plain;base64,YWJj"
            })
        },
        // `custom header`
        headers: {
            "x-custom-header": 123
        },
        beforeSend: function (jqxhr) {
            console.log(this.headers);
            alert("custom headers" + JSON.stringify(this.headers));
        },
        success: function (data) {
            // `file download`
            $("a")
                .attr({
                "href": data.file,
                    "download": "file.txt"
            })
                .html($("a").attr("download"))
                .get(0).click();
            console.log(JSON.parse(JSON.stringify(data)));
        },
        error: function (jqxhr, textStatus, errorThrown) {
          console.log(textStatus, errorThrown)
        }
    });
});