2021-12-25-🌦🌦 下载文件两种方式总结

1.后台服务器有静态资源且是固定的文件名（GET方式下载文件）

场景：已经生成的静态文件

第一种使用js

window.location.href="http://www.域名/template.xlsx(文件名)"

第二种 href

<a href="http://www.域名/template.xlsx(文件名)"></a>

ps: 有跨域问题

2.后台返回文件流

场景：动态数据生成

第一种 Data 协议

axios.post(请求路径URL, {参数Params}, {
            responseType: 'blob'
          }).then(function(res){
            var blob = res.data;
           // FileReader主要用于将文件内容读入内存
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            // onload当读取操作成功完成时调用
            reader.onload = function(e) {
              var a = document.createElement('a');
              // 获取文件名fileName
              var fileName = res.headers["content-disposition"].split("=");
              fileName = fileName[fileName.length - 1];
              fileName = fileName.replace(/"/g, "");
              a.download = fileName;
              a.href = e.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            }
          });

第二种使用 blob + window.URL.createObjectURL

动态数据下载，原理都是创建 blob协议的链接

//  `responseType` 表示服务器响应的数据类型，
//  可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'，
//  不是header内的属性

axios.post(请求路径URL, {参数Params}, {
            responseType: 'blob'
          }).then(function(response){
            const name = "XXX.xls"
             const url = window.URL.createObjectURL(new Blob([response]));
             const link = document.createElement("a");
             link.href = url;
             link.download = name
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
          });

第三种 href + data协议

适用于json，document 纯文档下载

function download(filename, text) {
  console.log(filename, text);
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

download('download.json', '{a: 1}')