前端文件预览功能，pdf预览，word预览，图片预览

最新推荐文章于 2024-07-23 14:05:42 发布

仰望屮川

最新推荐文章于 2024-07-23 14:05:42 发布

阅读量202

点赞数

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

本文链接：https://blog.csdn.net/weixin_45007276/article/details/133920584

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

包含功能pdf预览，word预览，图片预览

根据文件链接的后缀来进行区分格式
目前已经支持pdf，doc，docx，jpg，png格式
如果你需要其他格式的可以自行在hanlderPage函数中处理

使用方式

pdf预览

download=0 不显示；download=1 显示（注意是#）
http://xxxxxx/preview.html?url=你的pdf链接#download=是否显示操作区域

word预览

http://xxxxxx/preview.html?url=你的word链接

图片预览

http://xxxxxx/preview.html?url=你的word链接

完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>文件预览</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			html,
			body {
				height: 100%;
				width: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#file-doc {
				width: 100%;
				height: 100%;
				display: none;
			}
			#file-img {
				width: 80%;
				height: 80%;
				display: none;
				object-fit: contain;
			}
		</style>
	</head>
	<body>
		<div id="file-doc"></div>
		<img id="file-img" />
		<script async>
			// 获取URL字符串
			let url = window.location.href;
			const getParamsUrl = (url) => {
				return new Promise((resolve, reject) => {
					try {
						// 使用URL构造函数解析URL
						let parsedUrl = new URL(url);
						// 使用URLSearchParams获取参数
						let params = new URLSearchParams(parsedUrl.search);
						// 获取名为"url"的参数值
						let urlParameterValue = params.get("url");
						download = params.get("download");
						resolve(urlParameterValue);
					} catch (error) {
						reject(error);
					}
				});
			};
			const getFileType = (url) => {
				return new Promise((resolve, reject) => {
					try {
						// 使用split方法将URL路径拆分成数组
						var urlParts = url.split("/");
						// 获取URL路径中的最后一个部分（即文件名）
						var fileName = urlParts[urlParts.length - 1];
						// 使用split方法将文件名拆分成名称和后缀
						var fileNameParts = fileName.split(".");
						// 获取文件后缀
						var fileExtension =
							fileNameParts[fileNameParts.length - 1];
						resolve({ url: url, type: fileExtension });
					} catch (error) {
						reject(error);
					}
				});
			};
			const hanlderPage = (res_url, res_fileType) => {
				switch (res_fileType) {
					case "pdf":
						pdf_preview(res_url);
						break;
					case "docx":
						doc_preview(res_url);
						break;
					case "doc":
						doc_preview(res_url);
						break;
					case "jpg":
						img_preview(res_url);
						break;
					case "png":
						img_preview(res_url);
						break;
					default:
						break;
				}
			};
			const pdf_preview = (url) => {
				document.addEventListener("contextmenu", function (event) {
					event.preventDefault();
				});
				const pdf_dom = document.getElementById("file-doc");
				pdf_dom.style.display = "block";
				pdf_dom.innerHTML = `
          <iframe
            style="oncontextmenu: return false;height:100%;"
            frameborder="0"
            src="${url}"
            width="100%"
            height="100%"
          ></iframe>`;
			};
			const doc_preview = (url) => {
				document.addEventListener("contextmenu", function (event) {
					event.preventDefault();
				});
				const pdf_dom = document.getElementById("file-doc");
				pdf_dom.style.display = "block";
				pdf_dom.innerHTML = `
          <iframe
            style="oncontextmenu: return false;height:100%;"
            frameborder="0"
            src="https://view.officeapps.live.com/op/view.aspx?src=${url}#toolbar=${download}"
            width="100%"
            height="100%"
          ></iframe>`;
			};
			const img_preview = (url) => {
				document.addEventListener("contextmenu", function (event) {
					event.preventDefault();
				});
				const img_dom = document.getElementById("file-img");
				img_dom.style.display = "block";
				img_dom["src"] = url;
				console.log(img_dom);
			};
			getParamsUrl(url)
				.then((res_url) => {
					return getFileType(res_url);
				})
				.then((res) => {
					return hanlderPage(res.url, res.type);
				});
		</script>
	</body>
</html>