H5页面在手机浏览器下载文件

LIN-z.

已于 2024-05-06 09:52:12 修改

阅读量2.3k

点赞数

文章标签： javascript

于 2023-05-08 15:32:04 首次发布

本文链接：https://blog.csdn.net/lay7889/article/details/130560064

版权

该文章介绍了如何通过Ajax技术进行文件下载，包括处理文件URL，创建XMLHttpRequest对象，设置响应类型为blob，监听下载进度，并在成功下载后利用Blob对象和URL.createObjectURL方法生成下载链接，触发文件保存。同时，还展示了如何创建隐藏的a标签实现下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过Ajax进行文件下载

	const url = fileUrl; //下载文件url
	const fileName = fileName; //这里的filename是有后缀名的，没有后缀名的自己拼接一下
	var url2 = url.replace(/\\/g, '/');  //将地址中的'\'换成'/'，没必要可省略，如果省略了下面代码使用'url2'的地方要更换成'url'
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url2, true);
	xhr.responseType = 'blob';
	xhr.onload = () => {
		if (xhr.status === 200) {
			// 获取文件blob数据并保存
			var urlObject = window.URL || window.webkitURL || window;
			var blobUrl = new Blob([xhr.response]);
			var linkBtn = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
			linkBtn.href = urlObject.createObjectURL(blobUrl);
			linkBtn.download = fileName;
			linkBtn.click();
		} else {
            console.log('文件下载失败')
		}
	};
	xhr.onprogress = (evt) => {
        //监听文件下载进度，根据需求添加即可
		if (evt.lengthComputable) {
			const total = evt.total;
			const loaded = evt.loaded;
			const progress = Math.round(evt.loaded / evt.total * 100);
			console.log('progress', progress)
		}
	}
	xhr.send();

创建a标签进行下载

let url = file.url  //文件下载地址
let name = file.name  //文件下载后的名称（带后缀）
// 创建a标签
let a = document.createElement('a')
// 定义下载名称
a.download = name
// 隐藏标签
a.style.display = 'none'
// 设置文件路径
a.href = url
// 将创建的标签插入dom
document.body.appendChild(a)
// 点击标签，执行下载
a.click()
// 将标签从dom移除
document.body.removeChild(a)