前端 文件下载方法

欢迎查看此文件下载

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

添加页面下载按钮

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

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

添加下载方法

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

downloadFile() {

}

首先我们需要去请求

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

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

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

downloadFild(){
		// 我们现在想象有一个blob对象 为 blobData
	   let 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); 
}

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