PDFJS开发网站浏览pdf文件并默认跳转指定页

2023-12-16 17:44| 来源: 网络整理| 查看: 265

一、需求

最近，有一个web在线浏览pdf书籍的需求，并且加载书籍默认跳转到指定页，该pdf书籍是在web前端上传到服务器的指定目录下，通过点击按钮加载该pdf书籍在线阅读。pdfjs开发工具包很好的解决了这个问题，但是开发中遇到了pdfjs不支持跨域请求的问题，本篇文章对问题的解决做一个总结。

二、pdfjs下载与应用

下载地址：http://mozilla.github.io/pdf.js/getting_started/#download，下载稳定版。

或者访问我的百度网盘下载：

链接：https://pan.baidu.com/s/1ziK5ITvWvdtE4x1IswIe6Q

提取码：m18x

将下载下来的pdfjs文件夹放到代码工程的html目录下或者javascript目录下都可，如果pdf存放在工程目录下，可以通过以下方式浏览：

window.open("../scripts/pdfjs/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf#page=3);

但是，pdf书籍比较多，所以pdf书籍上传到了服务器磁盘空间的某个目录下管理，比如/opt/founder/books,所以就产生了跨域问题，但是可以在后台以文件输入流的方式读取该pdf文件，通过pdfjs开源包渲染到web，以下是具体代码。

我把pdfjs文件包放在了scripts目录下，前端代码：

var pageNo = 3; //默认打开第几页，例如第3页 var name = "XXXPDF书籍"; //网页名称，可为空; var iWidth=window.screen.availWidth/3*2; //弹出窗口的宽度; var iHeight=window.screen.availHeight/3*2; //弹出窗口的高度; var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置; var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置; // 打开新窗口加载pdf文档，并设置窗口大小。file参数为后台的路径（给后台路径传参=必须用%3D代替） var newWindow = window.open("../scripts/pdfjs/web/viewer.html?file=/zroyal/showpdf?kgSourId%3D"+kgSourId+"#page="+pageNo,name,'resizable=yes,height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft); newWindow.onload = function () { // 定时器修改新窗口的标题为【文档名称】，用以区分打开窗口的是哪个pdf文档 setTimeout(function () { newWindow.document.title = name; }, 100) }

以下是后端Java代码，pdf文件流写入response，渲染在open的窗口中。

@RequestMapping(value = "/zroyal/showpdf" , method = RequestMethod.GET) public void showpdf(HttpServletRequest request,HttpServletResponse response) { String fileName = "XXXjava编程书籍"; // 此处可以指定一个绝对路径作为参数 File file = new File("/opt/zroyal/books" + File.separator + fileName); if (file.exists()){ byte[] data = null; try { FileInputStream input = new FileInputStream(file); data = new byte[input.available()]; input.read(data); response.getOutputStream().write(data); input.close(); } catch (Exception e) { logger.error("pdf文件处理异常：" + e.getMessage()); } }else{ return; } } 三、最终效果：

点击【查看】按钮，触发JS中的window.open事件，实现了web浏览服务器中指定pdf书籍的功能。

关注我，我会不定期地分享工作、学习中开发的小功能，或许就是你现在需要的。

【本文地址】

公司简介

联系我们