欢迎查看此文件下载

我们每个项目中都会有一个文件下载的需求，但有些小伙伴遇到这种问题不知道该如何解决，那我今天就来为大家讲解一下

添加页面下载按钮

<div><button @click="downloadFile">下载文件</button></div>

当我们点击下载文件时会触发我们写的相应方法downloadFile

添加下载方法

我们需要在downloadFile方法中去写相对应的逻辑处理

downloadFile() {}

首先我们需要去请求

downloadFile() {// 初始化请求var xhr = new XMLHttpRequest();// 参数一：请求方式；参数二：请求地址xhr.open("GET", url); // 设置响应类型xhr.responseType = "blob"; // 设置响应类型为JSONxhr.onload = function(){// 这里可以写处理逻辑}xhr.send();
}

我们请求后会得到一个blob对象，（当然请求方式很多，我只是以最基础的js请求发送来进行演示）

然后我们需要去处理下载逻辑

downloadFild(){// 我们现在想象有一个blob对象 为 blobDatalet data = new Blob(blobData); // 做处理// 创建一个隐藏的a元素let a = document.createElement("a");// 设置地址a.href = window.URL.createObjectURL(data);// 你可以设置任何你想要的名称和扩展名a.download = "演示.txt"; // 加css隐藏a.style.display = "none";// 将a元素添加到DOM，并触发点击事件来下载文件document.body.appendChild(a);// 设置自点击事件a.click();// 一定要记得移除添加的元素document.body.removeChild(a); 
}

我们做完这个步骤后 就可以在本地相应地方看到下载的地址了