js在线预览pdf文件

最新推荐文章于 2026-04-28 09:24:26 发布

原创最新推荐文章于 2026-04-28 09:24:26 发布 · 3.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js在线预览pdf文件

js在线预览专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript实现在线预览PDF文件，包括效果展示和具体实现代码，提供了pdfobject.js的下载链接。

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

js在线预览PDF文件

一、效果预览

二、实现代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片在线预览</title>
<script src="${pageContext.request.contextPath}/js/pdfobject.js" type="text/javascript"></script>
<script language=javascript>
//预览PDF文件
 function preViewPDF(obj){
 	var fileUrl=$(obj).attr("fileUrl");
 	var title=$(obj).attr("title");
 	$("#pdfDiv").attr("src",fileUrl);
 	$("#pdftitle").html(title);
     PDFObject.embed(fileUrl, "#pdfDiv");
     $('.pdfobject').css('width','59%');
     $('.pdfobject').css('height','80%');
 }
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
<div class="row">
<c:forEach items="${fileList }" var="file" varStatus="status">
 <div class="row" id="div${status.index+1 }">
   <div class="col-md-4">
	 <div class="form-group" >
		<label class="control-label col-md-4" style="font-weight:bold;padding-top:0px;">${status.index+1 }.</label>
		  <c:choose>
			 <c:when test="${file.suffix == '.pdf'}">
			 <a title="${file.fileName }" onclick="preViewPDF(this)" data-toggle='modal' data-target='#large_pdf' fileUrl="<%=baseUrl %>uploadfiles/${file.fileUrl }" target=_blank>pdf预览</a>
			 </c:when>
			  <c:otherwise>
				无效文件
			  </c:otherwise> 
			</c:choose>
	 </div>
	</div>
 </div>
 </c:forEach>
 </div>
 
<!-- Modal 弹出框-->
<div class="modal fade bs-modal-lg in"  id="large_pdf" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="false" >
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h3 class="modal-title" id="pdftitle"></h3>
			</div>
			<div class="modal-body" style="width: 2500px;height:700px;">
				<div id="pdfDiv" style="width: 1500px;height: 700px;"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>