使用pdfjs插件在线预览PDF文件
2024-10-19 19:26:05
前言
本文介绍在html中使用 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>
最新文章
- 第二天--html
- text-align=center 失效原因
- c#下载共享文件夹下的文件并记录错误日志
- ajax检查用户名是否存在
- 深入.net(类及方法)
- 网络广告术语CPC、CPM和CTR的含义和关系
- JSON/XML序列化与反序列化(非构造自定义类)
- 【转+分析】JAVA: 为什么要使用";抽象类";? 使用";抽象类";有什么好处?
- 大数据分析神兽麒麟(Apache Kylin)
- yii columns value and type and checkbox columns
- oracle slient静默安装并配置数据库及仅安装数据库不配置数据库shell
- 归并排序的go语言与C++实现对比
- 如何禁用电脑USB接口
- 【学习笔记】Java finalize()的使用
- spring拦截器的简单实现Interceptor
- python字典作为统计记录工具
- Smarty学习笔记(二)
- 07-JavaScript之常用内置对象
- React动画组件——React-Transitio-group动画实现
- 如何在Ubuntu/Linux内使用 zip 压缩隐藏文件?