Vue实现下载文件，解决下载图片跳转问题

最新推荐文章于 2024-05-10 09:58:10 发布

勇敢小陈

最新推荐文章于 2024-05-10 09:58:10 发布

阅读量221

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ct5211314/article/details/137465646

版权

代码

async downloadFile(url) {
			try {
				if (true) {
					// 构造要下载的文件URL
					const fileUrl =""; // 替换为实际要下载的文件URL
					var suffix = fileUrl.substring(fileUrl.lastIndexOf("."));
					// 创建一个a标签
					let response = await fetch(fileUrl);
					// 内容转变成blob地址
					let blob = await response.blob();
					// 创建隐藏的可下载链接
					let objectUrl = window.URL.createObjectURL(blob);
					let a = document.createElement("a");
					//地址
					a.href = objectUrl;
					//修改文件名
					a.download = "文件名" + `${suffix}`;
					// 触发点击
					document.body.appendChild(a);
					a.click();
					//移除
					setTimeout(() => document.body.removeChild(a), 1000);
				}
			} catch (error) {
				console.error(error);
			} finally {
			}
		},