一、引子

在前端项目开发中，特别是PC端的开发，许多人都会遇到文件下载的功能。对于老鸟来说这是非常简单的，但是对于接触此类较少的人来说，有时候苦恼半天，各种百度查询。

二、文件类型

下面一张图体现了大部分经常下载的文件类型，MIME类型是我们在发起请求时需要设置的参数类型，扩展名对应的是后端设置的文件类型，两者要一一对应。保证下载正常进行

下载请求

通过axios发起请求下载，下载页面需要引入axios，引入axios前需要安装axios依赖。

var urls = xxxxxApi;//下载接口
      axios({
        url: urls,
        method: "post",
        responseType: "blob",
        params: xxxxParams,//此处写后端需要的参数
      })
        .then((res) => {
          let stringName = res.headers["content-disposition"].split("@")[1];//一般来说，文件名字后端都在返回头里，前后端可以约定文件名前用 @ 符号分隔，便于取值，用其他符号也可以。
          let fileNameEnd = stringName.split(".")[1];//获取到了后缀名
          let fileName = stringName.split(".")[0];//获取到文件名（不含后缀）
          //decodeURIComponent(fileName) ,一般来说后端返回的名字没有转码，需要前端解码utf-8，如果后端转了，就不用转。
          let endFileName = `${
            decodeURIComponent(fileName) + "." + fileNameEnd
          }`;
          let blob = new Blob([res.data], { type: "application/zip" }); //application/zip就是设置下载类型，需要设置什么类型可在标题二处查看，
          const url = window.URL.createObjectURL(blob); //设置路径
          const link = window.document.createElement("a"); // 创建a标签
          link.href = url;
          link.setAttribute("download", endFileName); // 给下载后的文件命名
          link.style.display = "none";
          link.click();
          URL.revokeObjectURL(url); // 释放内存
        })
        .catch((resp) => {
          //关闭遮罩层
        });

这差不多就是我们常见的vue下载文件的方式。如有更好的办法，欢迎交流