PDFJS开发网站浏览pdf文件并默认跳转指定页——解决跨域问题

最新推荐文章于 2024-12-06 17:04:02 发布

原创最新推荐文章于 2024-12-06 17:04:02 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web #js #java

工作知识库整理专栏收录该内容

5 篇文章

订阅专栏

一、需求

最近，有一个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;
         }
    }