前端文件下载利用a标签的download属性下载文件

1、对于后端返回的是url下载地址

代码（可直接复制拿去用）：

 // 点击下载文件参数href：下载地址,参数filename：文件名（如后端没有返回文件，可自定义文件名）
    downloadFile(href, fileName) {
      // 获取heads中的filename文件名
      let a = document.createElement("a");
        a.style.display = "none";
      // 给a标签创建下载的链接
      a.href = href;
      // 下载后文件名
      a.download = fileName;
      // 把a标签作为子节点插入当前body下
      document.body.appendChild(a);
      // 点击a标签下载
      a.click();
      // 下载完成移除元素
      document.body.removeChild(a);
    },

 

 2、后端返回数据的是流文件（看不懂我一些东西）

// 文件流转blob对象下载
function downloadFile(data, type, fileName) {
let blob = new Blob([data], {type: `application/${type};charset=utf-8`});
// 获取heads中的filename文件名
let downloadElement = document.createElement('a');
// 创建下载的链接
let href = window.URL.createObjectURL(blob);
downloadElement.href = href;
// 下载后文件名
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
// 点击下载
downloadElement.click();
// 下载完成移除元素
document.body.removeChild(downloadElement);
// 释放掉blob对象
window.URL.revokeObjectURL(href);
}

注意：

一般浏览器是支持的，需要注意的是如果你的项目是部署到客户自己平台上，那么客户的平台支不支持操作文件，如果不支持那这个方法就行不通，就需要用到客户平台的api（如果没有那也不是你的问题，需要客户直接去集成），比如微信平台是不允许操作文件的（因为涉及安全问题），只能下载预览一些图片，而且还必须要调用微信平台api