使用pdfjs插件在线预览PDF文件

最新推荐文章于 2023-10-15 21:37:46 发布

chen子健

最新推荐文章于 2023-10-15 21:37:46 发布

阅读量1.8k

点赞数

分类专栏： web 文章标签： PDF文件在线预览

本文链接：https://blog.csdn.net/qq_27900925/article/details/94630722

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

本文介绍使用 pdfjs 在线预览PDF文件

实现步骤

下载 pdfjs 并引入项目中
到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包，注意下载Stable稳定版的包。
将下载的压缩包解压并放入项目中。
使用方法
在 iframe 标签中使用。
假设 pdfjs 包放在目录 …/static 下。则写法如下：
<iframe id="previewpdf" src=""../static/pdfjs/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>
其中，src中的url是pdf文件的预览地址、page是设置pdf打开时从第一页开始显示。
样例

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>pdf文件预览</title>
	    <script src="../javascript/jquery-2.2.4.js"></script>
	    <script type="text/javascript">
		    $(function () {
		        var url = getPdfPreviewUrl; //获取pdf预览地址
		         $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1");
		    });
		</script>
	</head>
	<body>
		<div id="showPdf">
		    <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
		</div>
	</body>
</html>

chen子健

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用pdfjs插件在线预览PDF文件

前言本篇文章介绍使用 pdfjs 在线预览PDF文件实现步骤下载 pdfjs 并引入项目中到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs包，注意下载版本Stable稳定版的包。使用方法在 iframe 标签中使用。假设 pdfjs 包放在目录 …/static 下。则写法如下...
复制链接

扫一扫