文件下载和链接下载

文件流下载、下载链接下载方式

本篇文章主要讲解两种下载方式区别

1、第一种方式文件流下载

  this.axios.get(url).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          const blob = res.data; //res.data就是后端返回的文件流
          // 获取文件名
          const content = res.headers["content-disposition"]; //content-disposition是后端在响应头里面添加的文件名，具体内容在后面展示
          const fileName =content && content.split(";")[1].split("fileName=")[1];
          this.DownFiles(blob, fileName);
        }
      });

文件流返回的样子如下：

响应头中图片名称存放位置如下截图:

这个属性默认是没有的，需要后端单独设置这个属性，同时需要注意中文名字乱码问题，解决办法自行百度，需要设置编码格式utf-8。

下载方法如下，可以直接拿来使用,做了一些兼容处理

 //文件流下载
    DownFiles(blob, filename) {
      // 如果后端用encodeURI对文件名进行了编码，前端需用decodeURI进行解码（主要为处理特殊字符）
      var fileName = decodeURI(filename, "utf-8");
      
      // 由于ie不支持download属性，故需要做兼容判断
      if (navigator.appVersion.toString().indexOf(".NET") > 0) {
        // ie独有的msSaveBlob属性，blob为Blob文件流
        window.navigator.msSaveBlob(blob, fileName);
      } else {
        // 以下流程即为文章开始的下载流程
        var binaryData = [];
        binaryData.push(blob);
        let url = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/zip" })  //这一块的type属性，如果文件名带有后缀格式，比如说.png,那下载的文件就是.png格式，如果没有后缀则下载的格式就是默认的.zip格式。
        );
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href);
      }
    },

2、第二种下载方式——链接下载

这里需要说明一下，假如项目是https协议规范下载方法中是没法下载http链接的。最好的解决办法是将下载链接升级成https。
升级办法如下，将下面这段代码加到index.html中

  <!-- https跨域解决办法 -->
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

这段代码主要是将本地的http链接升级到https，如果接口支持就能正常访问，不能的话就直接被浏览器拦截了。新版的浏览器存在机制会直接拦截不安全的 链接，目前测试的浏览器是谷歌浏览器，版本是93以上都不行。如果后期有人有更好的解决办法欢迎留言交流一下。
下载链接方式目前有三种方式：
1、第一种 window.open

window.open(url,"_blank")//其实加不加——blank都一样，都会打开新窗口。

这种方式打开新窗口等url响应完成后会间隔几秒关闭。比较常用的方法。
2、第二种创建a标签下载

 let link = document.createElement("a");
 link.style.display = "none";
 link.href = url;
 link.download = fileName;
 document.body.appendChild(link);
 link.click();
 window.URL.revokeObjectURL(link.href);

这种方式是需要两个参数，一个文件名和下载地址。
3、第三种创建iframe下载

let link = document.createElement("iframe");
 link.style.display = "none";
 link.href = url;
 link.download = fileName;
 document.body.appendChild(link);
 link.click();
 window.URL.revokeObjectURL(link.href);

这种下载方式和第二种同样的原理，没什么可讲的。

以上方法只是个人的浅显之见，如果有什么错误的地方希望大佬们多担待一下，欢迎批评指正。