原生js下载word/pdf/xlsx/图片/

最新推荐文章于 2023-04-12 12:20:54 发布

玖逸少女梦

最新推荐文章于 2023-04-12 12:20:54 发布

阅读量223

点赞数

分类专栏： js常用案例 vue日常小知识基础知识文章标签： javascript word pdf

本文链接：https://blog.csdn.net/qq_35864320/article/details/128911843

版权

js常用案例同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

vue日常小知识

16 篇文章 0 订阅

订阅专栏

基础知识

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			div {
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div onclick="pdf()">下载pdf</div>
		<div onclick="word()">下载word</div>
		<div onclick="excel()">下载xlsx</div>
		<div onclick="jpg()">下载图片</div>
	</body>
	<script>
		function pdf() {
			let url = "http://test.yxycf.top/1.pdf"
			let list = {
				url,
				name: 'pdf文件',
				type: 'pdf'
			}
			downloadType(list)
		}
 
		function word() {
			let url = "http://test.yxycf.top/3.docx"
			let list = {
				url,
				name: 'word文件',
				type: 'word'
			}
			downloadType(list)
		}
 
		function excel() {
			let url = "http://test.yxycf.top/2.xlsx"
			let list = {
				url,
				name: 'excel文件',
				type: 'xlsx'
			}
			downloadType(list)
		}
 
		function jpg() {
			let url = "http://test.yxycf.top/4.jpg"
			let list = {
				url,
				name: '图片',
				type: 'img'
			}
			downloadType(list)
		}
 
		function downloadType(data) {
			switch (data.type) {
				case 'img':
					return downloadImg(data)
				case 'pdf':
					return downloadFile(data)
				case 'word':
					return downloadFile(data)
				case 'xlsx':
					return downloadFile(data)
			}
		}
 
		function downloadImg(data) {
			pathToBase64(data.url).then(res => {
				const link = document.createElement("a");
				link.href = res;
				link.setAttribute("download", data.name);
				document.body.appendChild(link);
				link.click();
				link.remove();
			}).catch(err => {
				console.log(err);
			})
		}
 
		function downloadFile(data) {
			fetchDownloadFile(data)
		}
 
		function fetchDownloadFile(data) {
			fetch(data.url, {
					method: "get",
					mode: "cors",
				})
				.then((response) => response.blob())
				.then((res) => {
					const downloadUrl = window.URL.createObjectURL(
						//new Blob() 对后端返回文件流类型处理
						new Blob([res], {
							type: data.type == "pdf" ? "application/pdf" : data.type == "word" ?
								"application/msword" : data.type == "xlsx" ? "application/vnd.ms-excel" : ""
						})
					);
					//word文档为msword,pdf文档为pdf
					const link = document.createElement("a");
					link.href = downloadUrl;
					link.setAttribute("download", data.name);
					document.body.appendChild(link);
					link.click();
					link.remove();
				}).catch((error) => {
					window.open(url);
				});
		};
 
		//获取Base64
		function pathToBase64(url) {
			return new Promise((resolve, reject) => {
				let image = new Image();
				image.onload = function() {
					let canvas = document.createElement('canvas');
					canvas.width = this.naturalWidth;
					canvas.height = this.naturalHeight;
					canvas.getContext('2d').drawImage(image, 0, 0);
					let result = canvas.toDataURL('image/png')
					resolve(result);
				};
				image.setAttribute("crossOrigin", 'Anonymous');
				image.src = url
				image.onerror = () => {
					reject(new Error('urlToBase64 error'));
				};
			})
		}
	</script>
</html>