各种文件的预览下载（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>
相关推荐
青涩小鱼14 小时前
Excel表格转换成PDF文件时显示不全怎么处理？
pdf·excel
web_小码农14 小时前
PC端实现PDF预览（支持后端返回文件流 || 返回文件URL）
pdf
hunter20620614 小时前
把markdown转换为pdf的方法
pdf
hunter20620614 小时前
cursor把md转换成pdf
pdf
Channing Lewis14 小时前
python如何使得pdf加水印后的大小尽可能小
开发语言·python·pdf
五行星辰14 小时前
Java 生成 PDF 文档 如此简单
java·pdf·maven
张登杰踩1 天前
如何用Python将pdf文件转化为高清图片
pdf
qq_407110922 天前
java读取设置pdf属性信息
java·开发语言·pdf
开开心心就好2 天前
极速、免费、体积小，一款PDF转图片软件
人工智能·智能手机·eclipse·pdf·软件工程·软件需求
m0_748230943 天前
SpringBoot实战（三十二）集成 ofdrw，实现 PDF 和 OFD 的转换、SM2 签署OFD
spring boot·后端·pdf
热门推荐
01Dell服务器升级ubuntu 22.04失败解决02Windows10安装PCL1.14.0及点云配准03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04机器人持续学习基准LIBERO系列10——文件结构05xgboost: Why not implement distributed XGBoost on top of spark06密码学原理技术-第六章-introduction to pulibc-key cryptography072023美赛A题之Lotka-Volterra【完整思路+代码】08centos7 init.d 和system.d09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10RAG 实践- Ollama+RagFlow 部署本地知识库