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

原创

已于 2024-08-14 11:49:51 修改 · 812 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#pdf

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

一、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/Fi

最低0.47元/天解锁文章

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

一、word

1、word的预览可以用onlyoffice

2、word的预览下载

二、pdf

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

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

引入插件