使用PDF.js在网页显示pdf文件并跳转到指定页码
来源:互联网 发布:魔法王座最新进阶数据 编辑:程序博客网 时间:2024/05/19 05:01
最近在做一个土地档案管理系统 ,有个需求是在前端网页展示土地档案扫描件的pdf文件,并根据目录跳转到指定页。
第一个问题,显示pdf文件。引入pdf.js。然后设定html地址,地址为http://localhost:8080/JYSystem/static/plugins/pdfJs/web/viewer.html?file=pdf文件路径
如图
这一步网上已经有很多人实现了,并写了博客,这里我就一笔带过。
第二个问题,根据目录页码跳转到指定页。这个问题看起来挺简单,实际上还是有点麻烦(不知道是不是自己水平还有待提高),主要是网上没人写过类似的东西,无法举(生)一(搬)反(硬)三(套)。既然找不到类似资源,那就自己想办法吧。
1 观察pdf.js中显示pdf的html的页面,viewer.html,发现它有一个页面跳转的工具。只要修改参数好像就可以完成任务。
2 既然是这样,那就传参数吧。用ajax传?抱歉,我自我定位不是程序员(不是我针对程序员,而是我水平不够),不想用那么多所谓技术,我只是想用最简单合理的方式解决问题。我选择的是直接在html里把参数带进来。即http://localhost:8080/JYSystem/static/plugins/pdfJs/web/viewer.html?file=/JYSystem"+document.getElementById("savePath").value+"&page="+qsy+"就是把起始页的页码传过去。
程序截图为
3 接收参数。 在viewer.html中加入如下代码
<script>
uuu=window.location.href;
len=uuu.length;
sffset=uuu.indexOf("&");
nnn=uuu.substr(sffset,len);
vaaal=nnn.split("=");
var ddd=document.getElementById("pageNumber").value;
//$("#pageNumber").value="2";
//alert(ddd);
var dddd=vaaal[1]
if(ddd!=dddd)
{
document.getElementById("pageNumber").value=dddd;
//PDFViewerApplication.page=dddd;
// alert(document.getElementById("pageNumber").value);
//PDFViewerApplication.navigateTo();
}
</script>
原以为问题就这样解决了,然而并没有。在调试过程中,发现pdf页面确实跳到了指定页,但接着就又跳回了默认的第一页。
4 好吧,只能用最后一招了,修改viewew.js的源码(共7615行)。一行一行看这种低效费时愚蠢且对自己没有任何提升的方式我是很排斥的(但如果迫于无奈,我也只好强忍着干啦,能忍几次实在不好说),看了几行,放弃了,先投个机吧。我觉得出现3的问题,可能是源码在加载html页面时初始化了, 我英语还凑合(大二考六级就500多分),就查找initial吧。结果找来找去,我发现了这个函数
setInitialView: function pdfViewSetInitialView(storedHash, scale) {
this.isInitialViewSet = true;
// When opening a new file (when one is already loaded in the viewer):
// Reset 'currentPageNumber', since otherwise the page's scale will be wrong
// if 'currentPageNumber' is larger than the number of pages in the file.
document.getElementById('pageNumber').value =
this.pdfViewer.currentPageNumber = 1;
/* if (PDFHistory.initialDestination) {
this.navigateTo(PDFHistory.initialDestination);
PDFHistory.initialDestination = null;
} else if (this.initialBookmark) {
this.setHash(this.initialBookmark);
PDFHistory.push({ hash: this.initialBookmark }, !!this.initialBookmark);
this.initialBookmark = null;
} else if (storedHash) {
this.setHash(storedHash);
} else if (scale) {
this.setScale(scale, true);
this.page = 1;
}
*/
啥也不说了,把该注释的注释了。一运行,可以了。
结果如图
5 看来投机还是有效果的,然而如果有些事情投机失败了,要怎么弄呢,预支一下烦恼。
- 使用PDF.js在网页显示pdf文件并跳转到指定页码
- pdf.js如何默认显示指定页码
- C#打开Adobe Reader进程打开pdf并传递页码参数跳转到指定页数
- c# pdf在目录中显示页码
- 使用PDF.js如何显示pdf文件的电子签章
- java解析PDF文件,并获取到指定数据.Eg
- 网页中显示PDF文件
- PDF在网页上显示
- 使用html2canvas实现网页截图,并嵌入到PDF
- java生成pdf文件并在网页下载
- 如何直接在网页中显示PDF文件
- 【转】如何直接在网页中显示PDF文件
- 如何直接在网页中显示PDF文件
- js实现html下载到本地并生成pdf文件
- 在Github中上传并直接显示pdf文件
- 在Github中上传并直接显示pdf文件
- 网页中adobe PDF显示,js控制pdf页面滚动
- 办公小技巧:怎么在PDF文件中添加页码
- [leetCode刷题笔记]561. Array Partition I
- Linux下同步文件到Git服务器
- 藏在你身边的降压药.......
- 实现有序广播
- Jupyter notebook入门教程(下)
- 使用PDF.js在网页显示pdf文件并跳转到指定页码
- 207. Course Schedule
- Linux读取串口数据
- mac 清除Mackeeper浏览器弹窗
- 操作系统核心原理-1.操作系统导论
- [Hackerrank题目选做] Jim And Challenges
- tunctl添加虚拟网卡TUN/TAP与brctl添加网桥
- 迷茫的五月
- iOS核心动画简介