开头
- 欢迎查看此文件下载
- 添加页面下载按钮
- 添加下载方法
欢迎查看此文件下载
我们每个项目中都会有一个文件下载的需求,但有些小伙伴遇到这种问题不知道该如何解决,那我今天就来为大家讲解一下
添加页面下载按钮
<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);
}
我们做完这个步骤后 就可以在本地相应地方看到下载的地址了