【前端小技能~预览变下载】预览图片--＞通过链接地址下载文件

最新推荐文章于 2024-07-08 10:40:35 发布

小球学前端

最新推荐文章于 2024-07-08 10:40:35 发布

阅读量938

点赞数

分类专栏：项目经验前端小点文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/121075529

版权

项目经验同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

前端小点

12 篇文章 0 订阅

订阅专栏

工作过程中，我们可能会遇到以下情况，当我们点击一个文件地址的时候，明明目的是要下载文件，但结果却是预览了文件内容，这个时候，我们可以找后端协商，让其配置修改，也可使用以下方式进行下载：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 可换成其他的文件类型 -->
		<a href="https://itsharer.oss-cn-beijing.aliyuncs.com/tmp/%E5%8C%85%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B.pdf">点我预览</a>
		<p id="download"></p>
	</body>
	<script>
		const download = document.getElementById("download");

		const loadFileToBlob = function(url, callback) {
			if (!url || !callback) return false;
			var xhr = new XMLHttpRequest();
			xhr.open('get', url, true);
			xhr.responseType = 'blob';
			xhr.onload = function() {
				callback(this.status == 200 ? this.response : false);
			}
			xhr.send();
			return true;
		}
		
		const load = () => {
			loadFileToBlob("https://itsharer.oss-cn-beijing.aliyuncs.com/tmp/%E5%8C%85%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B.pdf", function(blobFile) {
				if (!blobFile) return false;
				download.innerHTML = '<a download href="' + window.URL.createObjectURL(blobFile) + '" target="_blank">文件下载</a>';
			})
		}
		
		load()

		
	</script>
</html>

至此，点击立即下载就可以下载文件啦。

小球学前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端小技能~预览变下载】预览图片--＞通过链接地址下载文件

工作过程中，我们可能会遇到以下情况，当我们点击一个文件地址的时候，明明目的是要下载文件，但结果却是预览了文件内容，这个时候，我们可以找后端协商，让其配置修改，也可使用以下方式进行下载：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 可换成其他的文件类型 --&
复制链接

扫一扫