首页 > > 程序设计 > Java技术 >

使用webuploader上传word文件，前端用电子书的方…

2018-08-14 09:54:46来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

先上展示效果

文件上传页面，页面比较粗糙勿怪，

双击打开图中画红线的word文档，进行电子书预览

实现功能有四步走

1、前端实现word文件上传（本人用的是webuploader上传控件，个人感觉挺好用）

2、前端页面以turn.js的电子书控件展示（纯html5、css与JQuery实现）

3、后端将上传来的word文件转换成pdf文件   参考：https://www.cnblogs.com/xxyfhjl/p/6773786.html

4、再将pdf文件转成一张一张的图片

https://www.cnblogs.com/xxyfhjl/p/6773786.html

上代码

前端上传页面代码

①HTML样式

<div class="wrapper wrapper-content" style="margin-top: 5px;">
                <div class="row">
                    <div class="col-lg-3" style="width: 25%;float:left;position:relative;min-height:1px;padding-left: 15px;padding-right:15px;">
                        <div class="ibox float-e-margins" style="font-size:13px;height:510px;margin-left: 12px;">
                            <div class="ibox-content" style="height: 100%;">
                                <div class="file-manager" style="height: 100%;">
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group form-inline">
                                        <div id="filePicker" style="width: 100%;">上传</div>
                                    </div>
                                    <button class="btn btn-danger btn-block" onclick="backUp();">返回</button>
                                    <div class="hr-line-dashed"></div>
                                    <h5>文件类型</h5>
                                    <ul class="folder-list" style="padding: 0">
                                        <li><a onclick="searchSameType(0);"><i class="fa fa-folder"></i> 全部 </a></li>
                                        <li><a onclick="searchSameType(1);"><i class="fa fa-folder"></i> 文本文件 </a></li>
                                        <li><a onclick="searchSameType(2);"><i class="fa fa-folder"></i> 图片 </a></li>
                                        <li><a onclick="searchSameType(3);"><i class="fa fa-folder"></i> 视频 </a></li>
                                        <li><a onclick="searchSameType(4);"><i class="fa fa-folder"></i> 音频 </a></li>
                                    </ul>
                                    <h5 class="tag-title">标签</h5>
                                    <ul class="tag-list" style="padding: 0" id="type_id">
                                        <li><a href="">word</a></li>
                                        <li><a href="">excel</a></li>
                                        <li><a href="">pdf</a></li>
                                        <li><a href="">mp3</a></li>
                                        <li><a href="">mp4</a></li>
                                        <li><a href="">avi</a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9" style="width: 75%;float:left;position:relative;min-height:1px;padding-left: 15px;padding-right:15px;">
                        <div class="row" id="row_id"></div>
                    </div>
                    <div id="uploadProgress" class="mydiv1" style="height: 170px;width: 330px;z-index: 999;position: absolute;right: -330px;bottom: 5px;">
                        <div style="width: 100%;height:5px;background-color: #3C85EB"></div>
                        <div style="font-size: 20px;padding:5px;">上传进度</div>
                        <div style="height: 1px;width: 100%;background-color: #000;"></div>
                        <div id="fileList" class="uploader-list;" style="overflow:auto;height:120px;">                            
                        </div>
                    </div>
                </div>
            </div>
View Code

②js上传代码

//上传文件
        function upload(LOG_ID){
            //管理员才有上传按钮
            if(roleType==0){
                $("#filePicker").hide();
                return;
            }
            var user_id = getcookie("userId");
            var update_url= apiUrl+"app_riverFileFj/fileUpload?LOG_ID="+LOG_ID+"&USER_ID="+userId;
            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 自动上传。
                auto: false,
                // swf文件路径
                swf:'static/js/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: update_url,
                // 选择文件的按钮。可选。
                pick: {id:'#filePicker',  //选择文件的按钮
                        multiple:true},   //允许可以同时选择多个图片
                //限制传输文件类型
                accept: {
                    title: 'file',//描述
                    extensions: '*',//类型
                    mimeTypes: '*'//mime类型
                }
            });
             // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                $("#uploadProgress").animate({right:'20px'},"slow").fadeIn("slow");
                var fileAllName=file.name;
                var fileName="";
                var fileType=fileAllName.substring(fileAllName.indexOf("."));
                fileAllName=fileAllName.substring(0,fileAllName.indexOf("."));
                if(fileAllName.length>6){
                    fileName=fileAllName.substring(0,5);
                    fileName=fileName+"..."+fileType;
                }else{
                    fileName=fileAllName+fileType;
                }
                var oneProgress= "<div id='" + file.id +"' class='item' >"+
                                                "<div style='width: 40%;float:left;padding-left:3px;'>"+
                                                    "<h4 class='info'>"+ fileName +"</h4>"+
                                                "</div>"+
                                                "<div style='width: 60%;float:left;' id='"+file.id+"_bar'>"+
                                                "</div>"+
                                            "</div>";
                $("#fileList").append(oneProgress);
            });
             // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id+"_bar" ),
                $percent = $li.find('.progress .progress-bar');
                
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                                              '<div class="progress-bar" role="progressbar" style="width: 0%">0%' +
                                              '</div>' +
                                        '</div>').appendTo( $li ).find('.progress-bar');
                }
                var num=percentage.toFixed(3);
                $percent.css( 'width', percentage * 100 + '%' ).text("已上传："+num* 100 + '%');
            });
            // 文件上传成功
            uploader.on( 'uploadSuccess', function( file ) {
                $('#'+file.id).remove();
            });
            // 文件上传失败，显示上传出错
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });
            // 完成上传完
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
                $("#uploadProgress").animate({right:'-330px'},"slow",search());
            });
            $("#filePicker").on("change",function () {
                uploader.upload();
            });
        }
View Code

后端接受上传文件代码

/**
     * @athour：SZH
     * 2018年7月16日 下午4:14:08
     * @description：上传文件
     * @param request
     * @param response
     * @throws UnsupportedEncodingException
     */
    @RequestMapping("fileUpload")
    public void fileUpload(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
        try {
            PageData pd =this.getPageData();
            String FILE_FOLDER=pd.getString("LOG_ID");
            String USER_ID=pd.getString("USER_ID");
            
            System.out.println("收到文件");
            MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
            Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
            
            //文件保存路径
           String logo_path = request.getSession().getServletContext().getRealPath("uploadFiles/file")+File.separator;
           for(MultipartFile file :files.values()){
                   String fileAllName=file.getOriginalFilename();
                   String TYPE= fileAllName.substring(fileAllName.lastIndexOf(".")+1);
                   String fileName= fileAllName.substring(0,fileAllName.lastIndexOf("."));    
                   //保存的文件名
                   String fileNewName=new Date().getTime()+"."+TYPE;
                   String path=logo_path+FILE_FOLDER+"/"+fileNewName;
                   File newFile=new File(path);
                   if(!newFile.exists()){
                       newFile.mkdirs();
                   }
                   file.transferTo(newFile);
                   
                   //将word文档转成HTML文件
                   String HtmlName ="";
                   if(TYPE.equals("doc") || TYPE.equals("docx")) {
                    String wordFilePath=logo_path+FILE_FOLDER + "/"+fileNewName;
                    new Thread(()->{
                            office2Img(wordFilePath,1);
                        }
                    ).start();
                }else if(TYPE.equals("ppt") || TYPE.equals("pptx")) {
                    String wordFilePath=logo_path+FILE_FOLDER + "/"+fileNewName;
                    new Thread(()->{
                            office2Img(wordFilePath,2);
                        }
                    ).start();
                }else if(TYPE.equalsIgnoreCase("pdf")){
                    new Thread(()->{
                        PDF2ImageUtil.pdf2Image(newFile.getAbsolutePath(), logo_path+FILE_FOLDER, 300);
                        }
                    ).start();
                }
                   if(HtmlName.equals("")){
                       HtmlName=fileNewName;
                   }
                   //在数据库中保存记录
                   Date date = new Date();
                   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                   
                   pd.put("FILE_FOLDER", FILE_FOLDER);
                   pd.put("FILE_NAME", fileAllName);
                pd.put("FILE_TYPE", TYPE);
                pd.put("TM", sdf.format(date));
                pd.put("PERSON", USER_ID);
                pd.put("URL", "uploadFiles/file/"+FILE_FOLDER+File.separator+fileNewName);
                pd.put("HTML_URL","uploadFiles/file/"+FILE_FOLDER+"/"+HtmlName);
                RiverFileFjService.saveFile(pd);
               }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
public void office2Img(String officeFilePath,Integer opt){
        String pdfFile="";
        if(opt==1){
            pdfFile= Office2PDFUtil.word2PDF(officeFilePath);
        }else if(opt==2){
            pdfFile= Office2PDFUtil.ppt2PDF(officeFilePath);
        }
        if(pdfFile!=""){
            String dstImgFolder=pdfFile.substring(0,pdfFile.lastIndexOf("/"));
            PDF2ImageUtil.pdf2Image(pdfFile, dstImgFolder, 300);
        }
    }
View Code

两个工具类

office转pdf与pdf转图片

package com.hywy.util;

import java.io.File;

import com.jacob.activeX.ActiveXComponent;
import com.jacob.com.ComThread;
import com.jacob.com.Dispatch;

public class Office2PDFUtil {
    
    private static final Integer WORD_TO_PDF_OPERAND = 17;
    private static final Integer PPT_TO_PDF_OPERAND = 32;
    private static final Integer EXCEL_TO_PDF_OPERAND = 0;
    
    /**
     * @athour：SZH
     * 2018年7月27日 下午4:08:49
     * @description：word转pdf
     * @param wordFile
     * @return
     */
    public static String word2PDF(String wordFile) {
        String pdfFile=wordFile.substring(0,wordFile.lastIndexOf("."))+".pdf";
        ActiveXComponent app = null;        
        System.out.println("开始转换...");
        // 开始时间
        long start = System.currentTimeMillis();
        try {
            // 打开word
            app = new ActiveXComponent("Word.Application");
            // 设置word不可见,很多博客下面这里都写了这一句话，其实是没有必要的，因为默认就是不可见的，如果设置可见就是会打开一个word文档，对于转化为pdf明显是没有必要的
            // app.setProperty("Visible", false);
            // 获得word中所有打开的文档
            Dispatch documents = app.getProperty("Documents").toDispatch();
            System.out.println("打开文件: " + wordFile);
            // 打开文档
            Dispatch document = Dispatch.call(documents, "Open", wordFile,
                    false, true).toDispatch();
            // 如果文件存在的话，不会覆盖，会直接报错，所以我们需要判断文件是否存在
            File target = new File(pdfFile);
            if (target.exists()) {
                target.delete();
            }
            System.out.println("另存为: " + pdfFile);
            // 另存为，将文档报错为pdf，其中word保存为pdf的格式宏的值是17
            Dispatch.call(document, "SaveAs", pdfFile, WORD_TO_PDF_OPERAND);
            // 关闭文档
            Dispatch.call(document, "Close", false);
            // 结束时间
            long end = System.currentTimeMillis();
            System.out.println("转换成功，用时：" + (end - start) + "ms");
            return pdfFile;
        } catch (Exception e) {
            System.out.println("转换失败" + e.getMessage());
            return "";
        } finally {
            // 关闭office
            if (app != null) {  
                app.invoke("Quit", 0);  
            }  
            ComThread.Release();
        }
    }
    public static String ppt2PDF(String pptFile) {
        String pdfFile=pptFile.substring(0,pptFile.lastIndexOf("."))+".pdf";
        ActiveXComponent app = null;
        Dispatch ppt = null;
        System.out.println("开始转换...");
        // 开始时间
        long start = System.currentTimeMillis();
        try {
            ComThread.InitSTA();
            app = new ActiveXComponent("PowerPoint.Application");
            Dispatch ppts = app.getProperty("Presentations").toDispatch();
            /*
             * call 
             * param 4: ReadOnly
             * param 5: Untitled指定文件是否有标题
             * param 6: WithWindow指定文件是否可见
             * */
            ppt = Dispatch.call(ppts, "Open", pptFile, true,true, false).toDispatch();
            File target = new File(pdfFile);
            if (target.exists()) {
                target.delete();
            }
            System.out.println("另存为: " + pdfFile);
            Dispatch.call(ppt, "SaveAs", pdfFile, PPT_TO_PDF_OPERAND); // ppSaveAsPDF为特定值32
            //关闭文档
            Dispatch.call(ppt, "Close");
            // 结束时间
             long end = System.currentTimeMillis();
             System.out.println("转换成功，用时：" + (end - start) + "ms");
            return pdfFile;
        } catch (Exception e) {
            e.printStackTrace();
            return "";
        } finally {
            if (app != null) {
                app.invoke("Quit");
            }
            ComThread.Release();
        }
    }
}
View Code
package com.hywy.util;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.rendering.PDFRenderer;

public class PDF2ImageUtil {
    /**
     * @athour：SZH
     * 2018年7月18日 下午7:18:11
     * @description：
     * @param PdfFilePath PDF文件路径
     * @param dstImgFolder 图片路径
     * @param dpi
     */
    public static void pdf2Image(String PdfFilePath, String dstImgFolder, int dpi) {
        File file = new File(PdfFilePath);
        PDDocument pdDocument;
        try {
            String imgPDFPath = file.getParent();
            int dot = file.getName().lastIndexOf('.');
            String imagePDFName = file.getName().substring(0, dot); // 获取图片文件名
            String imgFolderPath = null;
            if (dstImgFolder.equals("")) {
                imgFolderPath = imgPDFPath + File.separator + imagePDFName;// 获取图片存放的文件夹路径
            } else {
                imgFolderPath = dstImgFolder+ File.separator + imagePDFName;
            }
 
            if (createDirectory(imgFolderPath)) {
                pdDocument = PDDocument.load(file);
                PDFRenderer renderer = new PDFRenderer(pdDocument);
                /* dpi越大转换后越清晰，相对转换速度越慢 */
                int pages = pdDocument.getNumberOfPages();
                StringBuffer imgFilePath = null;
                for (int i = 0; i < pages; i++) {
                    String imgFilePathPrefix = imgFolderPath +File.separator;
                    imgFilePath = new StringBuffer();
                    imgFilePath.append(imgFilePathPrefix);
                    imgFilePath.append(String.valueOf(i + 1));
                    imgFilePath.append(".png");
                    File dstFile = new File(imgFilePath.toString());
                    BufferedImage image = renderer.renderImageWithDPI(i, dpi);
                    ImageIO.write(image, "png", dstFile);
                }
                System.out.println("PDF文档转PNG图片成功！");
                pdDocument.close();
            } else {
                System.out.println("PDF文档转PNG图片失败：" + "创建" + imgFolderPath + "失败");
            }
 
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    private static boolean createDirectory(String folder) {
        File dir = new File(folder);
        if (dir.exists()) {
            return true;
        } else {
            return dir.mkdirs();
        }
    }
}
View Code

 电子书代码

//双击查看文件
        function showFileCont(file_url){
            var fileType_url=file_url.substring(file_url.indexOf("."));
            if(fileType_url.toLowerCase()==".doc" || fileType_url.toLowerCase()==".docx"){
                //获取图片保存路径
                var imgUrl=file_url.substring(0,file_url.indexOf("."));
                //获取文件个数
                var folderNum=getFolderNum(imgUrl);
                window.location.href="read_file/slider.html?id="+id+"&li="+li+"&imgUrl="+imgUrl+"&folderNum="+folderNum+"&reach_name="+reach_name+"&roleType="+roleType;
            //}else if(fileType_url.toLowerCase()==".ppt" || fileType_url.toLowerCase()==".pptx"){
            //    //获取图片保存路径
            //    var imgUrl=file_url.substring(0,file_url.indexOf("."));
            //    //获取文件个数
            //    var folderNum=getFolderNum(imgUrl);
            //    window.location.href="read_file/slider.html?id="+id+"&li="+li+"&imgUrl="+imgUrl+"&folderNum="+folderNum+"&reach_name="+reach_name+"&roleType="+roleType;
            }else{
                window.location.href="file_view/readFile.html?"+file_url;
            }
        }
View Code

简单对turns.js给的demo进行了简单的修改，在这里就不贴代码了，官网地址

http://www.turnjs.com/

使用到的包

　　pdfbox-2.0.11.jar ，fontbox-2.0.11.jar，jacob.jar，jacob-1.19-x64.dll

注意：

　　　本方法只能运行在windows上

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：springMVC文件上传和下载功能

下一篇：头条三面总结，面完精疲力尽

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签