用openoffice+jodconverter+webuploader+pdf.js实现文件上传在线预览功能
Posted 金角大王22
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用openoffice+jodconverter+webuploader+pdf.js实现文件上传在线预览功能相关的知识，希望对你有一定的参考价值。
一、背景
最近公司一个项目要实现一个文件上传以及多文档在线预览的功能，之前一直做无线工具开发的，没有涉及到这些东西。另外项目组缺java开发人员，而且自己也只是一个半吊子前端加小半吊子java开发人员，所以让我一个人先弄个Demo出来瞧瞧。在网上搜索了不少资料，在这里只是整理一下，留作以后查阅。
二、插件以及工具包
1.pdfjs-v1.7.225 前端pdf格式文件的显示组件
2.webuploader-0.1.5 百度的文件上传组件
3.video-js-6.2.5 html5视频播放组件
4.openoffice-4.1.3 本地安装的，这里主要用于文档转pdf的程序
5.jodconverter-core 3.0-beta-4 java调用openoffice的包
其中pdfjs可以用ViewerJS来代替，后者相对于是对前者的封装。另外java包jodconverter也可以用com.artofsolving.jodconverter.2.2.1来代替，根据网上别人说的以及自己小小测试了一下jodconverter.2.2.1也转换pdf的时候要快那么一点点，但是却不支持office2003之后的docx/xlsx/pptx这些文件类型，说是要定制java代码也可以实现支持，本来比较懒也就弃用了。
三、代码
废话说了一大堆先上前端代码，由于是Demo，代码写的很糙；
1.主要页面index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>文件预览Demo</title> 8 <!-- jquery --> 9 <script src="./plugIns/jquery-3.2.1.min.js"></script> 10 <!-- bootstrap --> 11 <link rel="stylesheet" href="./plugIns/bootstrap-3.3.7/css/bootstrap.min.css"> 12 <script src="./plugIns/bootstrap-3.3.7/js/bootstrap.min.js" charset="utf-8"></script> 13 <!-- webuploader --> 14 <link rel="stylesheet" type="text/css" href="./plugIns/webuploader-0.1.5/webuploader.css"> 15 <script type="text/javascript" src="./plugIns/webuploader-0.1.5/webuploader.min.js"></script> 16 <!-- font-awesome --> 17 <link rel="stylesheet" href="./plugIns/font-awesome-4.7.0/css/font-awesome.min.css"> 18 <link rel="stylesheet" href="./css/filepreview/preview.css"> 19 </head> 20 21 <body> 22 <div class="container" style="padding-top:150px;"> 23 <div> 24 <div class="list"> 25 26 </div> 27 </div> 28 <div id="uploader" class="wu-example"> 29 <!--用来存放文件信息--> 30 <div id="thelist" class="uploader-list"></div> 31 <div class="btns"> 32 <div id="picker">选择文件</div> 33 <button id="ctlBtn" class="btn btn-default">开始上传</button> 34 </div> 35 </div> 36 </div> 37 <div class="load"> 38 <img src="./images/loading.gif" alt=""> 39 </div> 40 </body> 41 <script src="./js/filepreview/preview.js" charset="utf-8"></script> 42 <script src="./js/filepreview/upload.js" charset="utf-8"></script> 43 </html>
2.控制文件上传的upload.js
1 $(function() { 2 var $list = $(\'#thelist\'), 3 $btn = $(\'#ctlBtn\'), 4 state = \'pending\'; 5 var uploader = WebUploader.create({ 6 // swf文件路径 7 swf: \'./plugIns/webuploader-0.1.5/Uploader.swf\', 8 // 文件接收服务端。 9 server: \'/file/upload\', 10 // 选择文件的按钮。可选。 11 // 内部根据当前运行是创建，可能是input元素，也可能是flash. 12 pick: \'#picker\', 13 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ 14 resize: false, 15 // 开起分片上传。 16 chunked: true, 17 //fileSingleSizeLimit: 10*1024*1024,//限制大小10M，单文件 18 //fileSizeLimit: allMaxSize*1024*1024,//限制大小10M，所有被选文件，超出选择不上 19 //设置允许上传的文件类型，不过点击选择文件的时候会很卡 20 // accept: { 21 // title: \'Images\', 22 // extensions: \'jpg,png\', 23 // mimeTypes: \'image/*\' 24 // } 25 }); 26 // 当有文件被添加进队列的时候 27 uploader.on(\'fileQueued\', function(file) { 28 let typeList = [\'png\', \'jpg\', \'txt\', \'xls\', \'doc\', \'ppt\', \'pdf\', \'mp4\',\'docx\',\'pptx\',\'xlsx\']; 29 if(!typeList.includes(file.name.split(\'.\')[1])){ 30 alert("不支持的文件类型！"); 31 uploader.removeFile( file ); 32 return; 33 } 34 35 36 $list.append(\'<div id="\' + file.id + \'" class="item">\' + 37 \'<h4 class="info">\' + file.name + \'</h4>\' + 38 \'<p class="state">等待上传...</p>\' + 39 \'</div>\'); 40 }); 41 // 文件上传过程中创建进度条实时显示。 42 uploader.on(\'uploadProgress\', function(file, percentage) { 43 var $li = $(\'#\' + file.id), 44 $percent = $li.find(\'.progress .progress-bar\'); 45 46 // 避免重复创建 47 if (!$percent.length) { 48 $percent = $(\'<div class="progress progress-striped active">\' + 49 \'<div class="progress-bar" role="progressbar" style="width: 0%">\' + 50 \'</div>\' + 51 \'</div>\').appendTo($li).find(\'.progress-bar\'); 52 } 53 54 $li.find(\'p.state\').text(\'上传中\'); 55 56 $percent.css(\'width\', percentage * 100 + \'%\'); 57 }); 58 uploader.on(\'uploadSuccess\', function(file) { 59 getFileList(); 60 $(\'#\' + file.id).find(\'p.state\').text(\'已上传\'); 61 }); 62 63 uploader.on(\'uploadError\', function(file) { 64 $(\'#\' + file.id).find(\'p.state\').text(\'上传出错\'); 65 }); 66 67 uploader.on(\'uploadComplete\', function(file) { 68 $(\'#\' + file.id).find(\'.progress\').fadeOut(); 69 }); 70 71 uploader.on(\'all\', function(type) { 72 if (type === \'startUpload\') { 73 state = \'uploading\'; 74 } else if (type === \'stopUpload\') { 75 state = \'paused\'; 76 } else if (type === \'uploadFinished\') { 77 state = \'done\'; 78 } 79 80 if (state === \'uploading\') { 81 $btn.text(\'暂停上传\'); 82 } else { 83 $btn.text(\'开始上传\'); 84 } 85 }); 86 87 $btn.on(\'click\', function() { 88 if (state === \'uploading\') { 89 uploader.stop(); 90 } else { 91 uploader.upload(); 92 } 93 }); 94 });
3.负责预览的preview.js
1 $(function() { 2 const typeList = [\'png\', \'jpg\', \'txt\', \'xls\', \'doc\', \'ppt\', \'pdf\',\'docx\',\'pptx\',\'xlsx\']; 3 getFileList = function() { 4 $(".list").empty(); 5 $.get("/file/list", function(data) { 6 data = JSON.parse(data); 7 for (let file of data) { 8 let htmlStr = \'<a class="point file" data-file="\' + file.name + \'" data-size="\' + file.size + \'" data-type="\'+ file.type +\'">\'; 9 if (file.type.toLowerCase() == \'png\' || file.type.toLowerCase() == \'jpg\') { 10 htmlStr = \'<a class="file" target="_blank" href="./filelist/\' + file.name + \'">\'; 11 } else if (file.type.toLowerCase() == \'pdf\') { 12 htmlStr = \'<a class="file" target="_blank" href="http://localhost:8080/plugIns/pdfjs/web/viewer.html?file=../../../../filelist/\' + file.name + \'">\'; 13 } else if (file.type.toLowerCase() == \'mp4\') { 14 htmlStr = \'<a class="file" target="_blank" href="video?path=../../filelist/\' + file.name + \'">\'; 15 } 16 let imgName = file.type==\'docx\'||file.type==\'xlsx\'||file.type==\'pptx\'?file.type.substr(0,file.type.length-1):file.type; 17 $(".list").append( 18 \'<div class="col-xs-6 col-md-2">\' + htmlStr + 19 \'<embed src="./images/svg/\' + imgName + \'.svg" type="image/svg+xml" /><span>\' + file.name + 20 \'</span></a> <i class="fa fa-eye"></i> <span class="number">\'+file.number+\'</span></div>\' 21 ); 22 } 23 }); 24 } 25 getFileList(); 26 27 /** 28 * 无法直接查看的文件，需要server先进行转换 29 */ 30 $(".list").on("click", ".point", function() { 31 let date = new Date().getTime(); 32 let param = $(this).data("file"); 33 let type = $(this).data("type"); 34 if (typeList.indexOf(type)==-1) { 35 alert("暂不支持预览的文件类型！"); 36 return; 37 } 38 if ($(this).data("size") >= 11534336) { 39 alert("文件太大，暂不支持预览！"); 40 return; 41 } 42 $(\'.load\').addClass(\'active\'); 43 $.ajax({ 44 type: \'post\', 45 url: \'/file/preview\', 46 data: param, 47 contentType: \'application/json\', 48 dataType: \'text\', 49 success: function(data) { 50 $(\'.load\').removeClass(\'active\'); 51 console.log("转换耗时===>" + (new Date().getTime() - date) + "ms"); 52 window.open("http://localhost:8080/plugIns/pdfjs/web/viewer.html?file=../../../../filelist/temp/" + data + ".pdf"); 53 }, 54 error: function(error) { 55 $(\'.load\').removeClass(\'active\'); 56 alert("error!"); 57 } 58 }); 59 }); 60 61 /** 62 * 查看文件，浏览量累加 63 */ 64 $(".list").on("click", ".file", function() { 65 let nSpan = $(this).parent().find(\'.number\'); 66 nSpan.text(nSpan.text()/1+1); 67 }); 68 });
4.播放mp4格式的video.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title></title> 9 <link rel="stylesheet" href="/plugIns/video-js-6.2.5/video-js.min.css"> 10 <!-- If you\'d like to support IE8 --> 11 <script src="/plugIns/jquery-3.2.1.min.js"></script> 12 <script src="/plugIns/video-js-6.2.5/ie8/videojs-ie8.min.js" charset="utf-8"></script> 13 <script src="/Global.js" charset="utf-8"></script> 14 <style media="screen"> 15 .videoCont { 16 padding-top: 150px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div class="videoCont"> 23 <video id="my-video" class="video-js" controls preload="auto" width="720" height="480" poster="MY_VIDEO_POSTER.jpg" data-setup="{}"> 24 <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 25 <!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> 26 <source src="/filelist/Wildlife.wmv" type="video/wmv"> --> 27 <p class="vjs-no-js"> 28 To view this video please enable JavaScript, and consider upgrading to a web browser that 29 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 30 </p> 31 </video> 32 </div> 33 <script src="/plugIns/video-js-6.2.5/video.min.js" charset="utf-8"></script> 34 <script type="text/javascript"> 35 let wWidth = document.body.clientWidth; 36 $(\'.videoCont\').css(\'padding-left\',(wWidth-$(\'#my-video\').attr("width"))/2); 37 let path = Global.getParamByKey("path"); 38 $("#my-video source[type=\'video/mp4\']").attr("src",path); 39 var myPlayer = videojs(\'my-video\'); 40 videojs("my-video").ready(function() { 41 var myPlayer = this; 42 myPlayer.play(); 43 }); 44 </script> 45 </body> 46 47 </html>
5.pom.xml
1 <dependencies> 2 <!-- Spring Boot web依赖 --> 3 <dependency> 4 <groupId>org.springframework.boot</groupId> 5 <artifactId>spring-boot-starter-web</artifactId> 6 </dependency> 7 8 <!-- Junit --> 9 <dependency> 10 <groupId>junit</groupId> 11 <artifactId>junit</artifactId> 12 <version>4.12</version> 13 </dependency> 14 <dependency> 15 <groupId>org.apache.commons</groupId> 16 <artifactId>commons-lang3</artifactId> 17 <version>3.6</version> 18 </dependency> 19 <!-- openoffice --> 20 <dependency> 21 <groupId>org.quartz-scheduler</groupId> 22 <artifactId>quartz</artifactId> 23 <以上是关于用openoffice+jodconverter+webuploader+pdf.js实现文件上传在线预览功能的主要内容，如果未能解决你的问题，请参考以下文章使用 Jodconverter 和 openoffice.org 将 PPT 转换为 JPG
debian 上的 docsplit/jodconverter openoffice 问题
SpringBoot集成jodconverter使用openoffice将word转为pdf