各种文件的预览下载（docx，pdf，txt，图片）

Seven_Ting

已于 2024-08-14 11:49:51 修改

阅读量416

点赞数 3

分类专栏：综合文章标签： pdf

于 2024-08-14 11:48:26 首次发布

本文链接：https://blog.csdn.net/Seven_Ting/article/details/141183266

版权

综合专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、word

1、word的预览可以用onlyoffice

2、word的预览下载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick="FilehandleClick()">word文件</div>
	</body>
	<script>
		function FilehandleClick(){
			window.location.href = "word文件线上链接地址"
			
			let downloadElement = document.createElement("a");
			let href = window.URL.createObjectURL(blob);
			downloadElement.href = href;
			downloadElement.download = name;
			document.body.appendChild(downloadElement);
			downloadElement.click();
			document.body.removeChild(downloadElement);
			window.URL.revokeObjectURL(href);
		}
	</script>
</html>

二、pdf

1、pdf预览：跳转新页面预览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick="FilehandleClick()">pdf文件</div>
	</body>
	<script>
		//预览，新开一页
		async function FilehandleClick() {
			let url = 'pdf线上链接地址.pdf'
			const response = await fetch(url)
			// 使用 fetch 函数获取 url 对应资源的响应
			const blob = await response.blob()
			//使用 response.blob() 方法将响应转换为一个 Blob 对象
			const blobUrl = URL.createObjectURL(blob)
			//使用 URL.createObjectURL(blob) 方法创建一个指向 Blob 对象的URL 
			window.open(blobUrl, '_blank')
		}
	</script>
</html>

2、pdf下载：引入外部插件

引入插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

button

<button onclick="downloadPDF('pdf线上链接地址.pdf', '下载后的pdf名字.pdf')">下载PDF</button>

function

function downloadPDF(url, filename) {
	fetch(url)
		.then(response => response.blob())
		.then(blob => {
			saveAs(blob, filename);
		})
		.catch(error => console.error('Error downloading PDF:', error));
}

全部代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>PDF Viewer</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
	</head>
	<body>
		<button onclick="downloadPDF('pdf线上链接地址.pdf', '下载文件名称.pdf')">下载PDF</button>

		<script>
			function downloadPDF(url, filename) {
				fetch(url)
					.then(response => response.blob())
					.then(blob => {
						saveAs(blob, filename);
					})
					.catch(error => console.error('Error downloading PDF:', error));
			}
		</script>
	</body>
</html>

3、pdf直接下载

注意：这个下载可能会出现文件损坏，无法打开的问题

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>PDF下载</title>
	</head>
	<body>
		<button
			onclick="downloadPDF('pdf线上链接地址.pdf', '下载文件名称.pdf')">下载PDF</button>

		<script>
			function downloadPDF(val1, val2) {
				blob = new Blob([val1], {
					type: "application/pdf",
				});
				name = val2
				var downloadElement = document.createElement("a");
				var href = window.URL.createObjectURL(blob);
				downloadElement.href = href;
				downloadElement.download = name;
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement);
				window.URL.revokeObjectURL(href);
			}
		</script>
	</body>
</html>

三、txt

1、txt的预览：跳转新页面预览

注意：直接用a标签，可以跳转预览，但是会出现乱码的问题

<a  href="线上链接地址.txt" target="_blank">txt文件地址</a>

2、txt的下载

引入jquery

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

button

<button onclick="downloadTxt('线上链接.txt', '下载文件名称.txt')">下载txt</button>

function downloadTxt(content, fileName) {
	$.ajax({
		url: content,
		success: function(data, status) {
			download(`${fileName}.txt`, data)
		},
		error: function(data, status) {
			// console.log('log err',arguments)
		}
	});
}

function download(filename, text) {
	var pom = document.createElement("a");
	pom.setAttribute(
		"href",
		"data:text/plain;charset=utf-8," + encodeURIComponent(text)
	);
	pom.setAttribute("download", filename);
	if (document.createEvent) {
		var event = document.createEvent("MouseEvents");
		event.initEvent("click", true, true);
		pom.dispatchEvent(event);
	} else {
		pom.click();
	}

}

全部代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>txt下载</title>
		<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
		</script>
	</head>
	<body>
		<button onclick="downloadTxt('线上链接.txt', '下载文件名称.txt')">下载txt</button>

		<script>
			function downloadTxt(content, fileName) {
				$.ajax({
					url: content,
					success: function(data, status) {
						download(`${fileName}.txt`, data)
					},
					error: function(data, status) {
					}
				});
			}

			function download(filename, text) {
				var pom = document.createElement("a");
				pom.setAttribute(
					"href",
					"data:text/plain;charset=utf-8," + encodeURIComponent(text)
				);
				pom.setAttribute("download", filename);
				if (document.createEvent) {
					var event = document.createEvent("MouseEvents");
					event.initEvent("click", true, true);
					pom.dispatchEvent(event);
				} else {
					pom.click();
				}

			}
		</script>
	</body>
</html>

四、图片

1、图片的预览：直接跳转新页面预览

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>图片预览</title>
	</head>
	<body>
		<img alt=""
			onclick="seePDF('线上图片链接.jpg')"
			src="线上图片链接.jpg">

		<script>
			/**
			 * @param {Object} val2 文件的线上链接
			 */
			async function seePDF(val2) {
				const response = await fetch(val2)
				// 使用 fetch 函数获取 url 对应资源的响应
				const blob = await response.blob()
				//使用 response.blob() 方法将响应转换为一个 Blob 对象
				const blobUrl = URL.createObjectURL(blob)
				//使用 URL.createObjectURL(blob) 方法创建一个指向 Blob 对象的URL 
				window.open(blobUrl, '_blank')
			}
		</script>
	</body>
</html>

2、图片的下载

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>图片下载</title>
	</head>
	<body>
		<button onclick="FilehandleClick('线上图片链接.png'">下载图片</button>

		<script>
			/**
			 * @param {Object} val2 文件的线上链接
			 */
			function FilehandleClick(val2) {
				var imageUrl = val2; // 替换为你要下载的图片的URL
				var fileName = "图片名称.jpg"; // 下载的文件名，根据需要自行设置
				var xhr = new XMLHttpRequest();
				xhr.open("GET", imageUrl, true);
				xhr.responseType = "blob";

				xhr.onload = function() {
					if (xhr.status === 200) {
						var blob = new Blob([xhr.response], {
							type: "image/jpg"
						}); // 根据实际图片类型进行设置
						var link = document.createElement("a");
						link.href = window.URL.createObjectURL(blob);
						link.download = fileName;
						link.click();
					}
				};

				xhr.send();

				var downloadElement = document.createElement("a");
				var href = window.URL.createObjectURL(blob);
				downloadElement.href = href;
				downloadElement.download = name;
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement);
				window.URL.revokeObjectURL(href);
			}
		</script>
	</body>
</html>