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

Seven_Ting2024-08-15 13:19

一、word

1、word的预览可以用onlyoffice

2、word的预览下载

javascript 复制代码 
<!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预览：跳转新页面预览

javascript 复制代码 
<!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下载：引入外部插件

引入插件

html 复制代码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

button

html 复制代码 
<button onclick="downloadPDF('pdf线上链接地址.pdf', '下载后的pdf名字.pdf')">下载PDF</button>
  • function
javascript 复制代码 
function downloadPDF(url, filename) {
	fetch(url)
		.then(response => response.blob())
		.then(blob => {
			saveAs(blob, filename);
		})
		.catch(error => console.error('Error downloading PDF:', error));
}

全部代码

html 复制代码 
<!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直接下载

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

html 复制代码 
<!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标签，可以跳转预览，但是会出现乱码的问题

html 复制代码 
<a  href="线上链接地址.txt" target="_blank">txt文件地址</a>

2、txt的下载

引入jquery

html 复制代码 
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

button

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

js

javascript 复制代码 
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();
	}

}

全部代码

javascript 复制代码 
<!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、图片的预览：直接跳转新页面预览

html 复制代码 
<!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、图片的下载

html 复制代码 
<!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>
相关推荐
不想有bug的小菜鸟2 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
IDRSolutions_CN18 小时前
（教程）PDF 字体技术入门
java·经验分享·pdf·软件工程·团队开发
恶猫1 天前
[特殊字符]清华大学：DeepSeek从入门到精通.pdf（清华领航，驾驭DeepSeek，开启AI新境界）
ai·pdf·deepseek
别拿曾经看以后~2 天前
【PDF预览】使用iframe实现pdf文件预览，加盖章
pdf
自然 醒2 天前
鸿蒙ArkTs如何实现pdf预览功能？
华为·pdf·harmonyos·harmonyosnext版本
Leo.yuan2 天前
48页PDF | GBT 36073-2018 数据管理能力成熟度评估模型 (附下载）
pdf
PythonFun2 天前
1分钟用DeepSeek编写一个PDF转Word软件
pdf·c#·word
William.csj2 天前
Matlab——图像保存导出成好看的.pdf格式文件
matlab·pdf
風落3 天前
PDF无限使用，永久免费！
pdf
d3soft4 天前
厦大团队：DeepSeek大模型概念、技术与应用实践 140页PDF完整版下载
ai·pdf·教程·deepseek
热门推荐
01DeepSeek各版本说明与优缺点分析02本地部署DeepSeek教程（Mac版本）03如何在WPS和Word/Excel中直接使用DeepSeek功能04DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具05太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）06DeepSeek本地部署详细指南07从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek r1本地安装全指南10保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型