做视频的网站有哪些,网站建设方案说,南安网站建设,wordpress获取文章内容过滤空格开头 欢迎查看此文件下载添加页面下载按钮添加下载方法 欢迎查看此文件下载
我们每个项目中都会有一个文件下载的需求#xff0c;但有些小伙伴遇到这种问题不知道该如何解决#xff0c;那我今天就来为大家讲解一下
添加页面下载按钮
divbutton clickdow… 开头 欢迎查看此文件下载添加页面下载按钮添加下载方法 欢迎查看此文件下载
我们每个项目中都会有一个文件下载的需求但有些小伙伴遇到这种问题不知道该如何解决那我今天就来为大家讲解一下
添加页面下载按钮
divbutton clickdownloadFile下载文件/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);
}我们做完这个步骤后 就可以在本地相应地方看到下载的地址了
