js 下载http路径的pdf/word/excel/图片文件

清秋挽风

已于 2022-09-23 18:07:36 修改

阅读量4.5k

点赞数 6

分类专栏：前端文章标签： javascript html5

于 2022-06-14 16:02:23 首次发布

本文链接：https://blog.csdn.net/qq_43684588/article/details/125280102

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

效果图
在这里插入图片描述
注意：直接下载pdf文件可能会是预览

<!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>
		<div onclick="directDownload('http://test.yxycf.top/1.pdf','测试文件')">直接访问http地址pdf--可能是预览</div>
		<div onclick="directDownload('http://test.yxycf.top/2.xlsx','测试文件')">直接访问http地址xlsx</div>
		<div onclick="directDownload('http://test.yxycf.top/3.docx','测试文件')">直接访问http地址docx</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)
			}
		}
		/**
		 * quality 图片质量
		 */
		function downloadImg(data, quality = 0.9) {
			pathToBase64(data.url, quality).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, quality = 1, width = 1, height = 1) {
			return new Promise((resolve, reject) => {
				let image = new Image();
				image.onload = function() {
					let canvas = document.createElement('canvas');
					canvas.width = image.width / width;
					canvas.height = image.height / height;
					canvas.getContext('2d').drawImage(image, 0, 0);
					let result = canvas.toDataURL('image/jpeg', quality)
					resolve(result);
				};
				image.setAttribute("crossOrigin", 'Anonymous');
				image.src = url
				image.onerror = () => {
					reject(new Error('urlToBase64 error'));
				};
			})
		}

		function directDownload(url, filename) {
			const link = document.createElement("a");
			link.href = url;
			link.setAttribute("download", filename);
			document.body.appendChild(link);
			link.click();
			link.remove();
		}
	</script>
</html>