1.使用JavaScript来实现浏览器文件下载:
function downloadFile(url, filename) {
// 创建一个隐藏的<a>标签
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = filename;
// 将<a>标签添加到页面中
document.body.appendChild(a);
// 触发<a>标签的点击事件,开始下载文件
a.click();
// 移除<a>标签
document.body.removeChild(a);
}
// 使用示例
downloadFile('http://www.baidu.com/file.txt', 'my.txt');
(1)定义了一个函数,它接受两个参数:文件的URL和要保存的文件名。
(2)该函数创建一个隐藏的<a>
标签,将文件的URL和文件名设置为其属性,然后将其添加到页面中。最后,触发<a>
标签的点击事件,浏览器会自动下载文件。
(3)下载完成后,我们将<a>
标签从页面中移除。
2.直接通过a标签的href属性:(get请求)
<a href='www.baidu.com?id=12' download="name.txt">下载</a>
3.下载文件流 (post请求)
axios({
url:'www.baidu.com/downloadBillFreezeInfo?id=' + id,
method:'post'
responseType: 'blob',})
.then((response) => {
const url = window.URL.createobjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download',fileName);
document.body.appendchild(link);
link.click();
document.body.removechild(link);
})
responseType
是Axios中的一个配置选项,用于指定服务器响应的数据类型。它可以设置为以下几种类型:
arraybuffer
:返回一个包含二进制数据的ArrayBuffer
对象。blob
:返回一个包含二进制数据的Blob
对象。document
:返回一个HTML文档对象。json
:返回一个JavaScript对象,该对象是从服务器返回的JSON数据解析而来。text
:返回一个字符串,该字符串是从服务器返回的文本数据。
默认responseType
设置为json
,即Axios会自动将服务器返回的JSON数据解析为JavaScript对象。
如果你需要获取其他类型的数据,可以通过设置responseType
来实现。
例如,如果你需要下载一个二进制文件,可以将responseType
设置为arraybuffer
或blob
。