springboot整合pdf.js实现在线预览pdf文件

今天在项目中实现pdf在线预览的功能的如图，通过百度，查询合适的方法，最为简单的的是通过pdf.js的插件在前台展示。本以为是挺容易实现的，但都有莫名其妙的错误。

第一步：下载源码https://github.com/mozilla/pdf.js

第二步：构建PDF.js

ps：其实我们使用pdf.js，只需要构建后的内容，大家可以到我的百度云盘下载：https://pan.baidu.com/s/10j9rqnY-vkyLRQuxCWrhfQ 提取码：gigy ；下载后复制generic到到resource/static/ 下，可以改名为pdf（自定义）

第三步：

修改viewer.js

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' 里面是PDF的路径，这是默认加载pdf文件的路劲

第四步：在前端js中引用（在点击事件中）

var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
//调用pdfjs的viem.html页面来展示获得pdf
window.open(localhostPath + "/pdf/web/viewer.html?file=http://localhost:8083/previewPdf");

第四步：后台controller实现的代码

/*** 预览pdf文件* @param fileName*/@RequestMapping(value = "/previewPdf", method = RequestMethod.GET)public void pdfStreamHandler(String fileName,HttpServletRequest request,HttpServletResponse response) {File file = new File("E:\\"+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) {e.printStackTrace();}}else{return;}}

开始以为这样子就可以访问到本地pdf文件，我发现我错了，不知道为什么通过这种方式调用viewer.html，fileName参数传递不过来，后面我把File file = new File("E:\\test.pdf");就能在前台读取到了pdf文件。（参数不能传递过来，原因不明）。

然后我想访问ipfs上的文件，它又不知道怎么传递参数，然后我就用两个方法实现在线预览ipfs上的pdfs文件，首先先通过ipfs的文件路径获取到文件的。然后再使用一个方法把获取到的数据展现在viewer.html上。

前台代码：

 //文件预览function previewPdf(obj) {//首先获得按钮列，然后获得行，再获得这行的所有列var $td = $(obj).parents('tr').children('td');//获得指定的列的值var fileName = $td.eq(0).text();var path = $td.eq(1).text();var url = "http://localhost:8083/tempDownloadFile?path=" + path + "&amp;fileName" + fileName;$.ajax({type: 'POST',async: false,url: url,dataType: 'text',success: function (responseText) {if (responseText == "success") {// alert(11)var curWwwPath = window.document.location.href;var pathName = window.document.location.pathname;var pos = curWwwPath.indexOf(pathName);var localhostPath = curWwwPath.substring(0, pos);//调用pdfjs的viem.html页面来展示获得pdfwindow.open(localhostPath + "/pdf/web/viewer.html?file=http://localhost:8083/previewPdf");}},error: function () {alert('发生错误');}});};

后台代码：

/*** 预览pdf文件*/@RequestMapping(value = "/previewPdf", method = RequestMethod.GET)public void pdfStreamHandler(HttpServletRequest request, HttpServletResponse response) throws IOException {byte [] data = (byte[]) request.getSession().getAttribute("data");if (data != null) {response.getOutputStream().write(data);} else {return;}request.getSession().removeAttribute("data");}/***  临时缓存pdf文件用于在线浏览* @param response*/@RequestMapping("/tempDownloadFile")@ResponseBodypublic void tempDownloadFile(String path , String fileName , HttpServletRequest request, HttpServletResponse response) throws IOException {byte[] data = ipfsService.download(path);request.getSession().setAttribute("data",data);response.getWriter().write("success");}

展示：

http://localhost:8083/pdf/web/viewer.html?file=http://localhost:8083/previewPdf这样子的访问就是通过后台获取的pdf的流，然后通过在前台展示。

到此pdf.js结束了，不过本人还是不清楚这样子传递参数，为什么后台没法接受到，希望各位大神告诉一下小弟。

springboot整合pdf.js实现在线预览pdf文件相关推荐

前端js实现在线预览pdf、word、xls、ppt等文件
昨天遇到一个需求,公司的视频项目都是视频类型,如果是文件类型就直接打开预览,或者下载查看项目把请求的资源都作为视频资源处理,直接赋值给 video 标签解析.所以我新增了一个功能函数,方法很简单文 ...
pdf转html在线预览,PDF转html
概述 Spring 是最受欢迎的企业级 Java 应用程序开发框架,数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好.易于测试.可重用的代码. Spring 框架是一个开源的 Ja ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
android 在线预览pdf文件
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 1.andorid原生自带的pdf管理库,主要提供 ...
android 在线预览pdf文件（目前最全）
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供 ...
使用libreoffice将office文档（word、ppt、excel）转pdf，实现在线预览
项目需要实现局域网预览office文档的功能,之前做的在线项目,都是将文档上传到cdn,利用cdn自带的转码功能,把文档转换为pdf,然后再用pdf.js实现在线预览. 因为是局域网,没有办法上传到c ...
Android在线预览pdf文件的几种方式
Android原生WebView不支持预览pdf文件,ios却可以,所以Android想要实现在线预览WebView要通过其他方法,有以下几种方法: 第一种方式: andorid原生自带的pdf管理库 ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...

springboot整合pdf.js实现在线预览pdf文件

springboot整合pdf.js实现在线预览pdf文件相关推荐

最新文章

热门文章