码迷,mamicode.com
首页 > Web开发 > 详细

pdf.js实现图片在线预览

时间:2019-06-23 14:02:13      阅读:522      评论:0      收藏:0      [点我收藏+]

标签:span   source   代码   结束   null   端口   pen   main   localhost   

 

项目需求

  前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器不兼容,所以,选择了使用pdf.js,这里记录一下,以后使用的时候好查找,也希望可以帮助有需要的人。

 

word文件转pdf文件

  首先需要将指定的word文档转为pdf文件,方法有很多,这里不介绍,有需要的童鞋可以去网上下载即可。我这里用的是OpenOffice,版本是4.1.6,使用很简单,下载好了以后,根据提示进行安装,然后到任务管理器中,找到OpenOffice服务,开启即可,然后写一段代码,将word文件转为pdf文件,,这里附上我的转化代码。

public class office {
    /*
     * 获取每一个文件的名称
     */    
    public static void getFile(File file){
        if(file != null){
            File[] f = file.listFiles();
            if(f != null){
                for(int i=0;i<f.length;i++){
                    getFile(f[i]);
                    String filename = f[i].getName();
                    System.out.println(filename);
                    //System.out.println("PDF文件名:"+filename.substring(0,14));
                    office2PDF("D:/test4/"+filename,"D:/pdf4/"+filename.substring(0,14)+".pdf");//根据自己需要获取pdf文件的文件名
                }
                System.out.println("*******************恭喜!转换结束了!!!******************");
            }else{
                //System.out.println(file);
            }
        }
    }
    
    /*
     * word 转 pdf 方法
     */
    public static int office2PDF(String sourceFile, String destFile) {
        try {
            File inputFile = new File(sourceFile);
            if (!inputFile.exists()) {
                return -1;
            }

            File outputFile = new File(destFile);
            if (!outputFile.getParentFile().exists()) {
                outputFile.getParentFile().mkdirs();
            }

            OpenOfficeConnection connection = new SocketOpenOfficeConnection("127.0.0.1", 8100);//端口是固定的,IP根据自己服务所在的服务器进行配置
            connection.connect();

            //获去连接
            DocumentConverter converter = new OpenOfficeDocumentConverter(connection);
            converter.convert(inputFile, outputFile);

            //关闭连接
            connection.disconnect();

            return 0;
        } catch (Exception e) {
            e.printStackTrace();
            return -1;
        }
    }

    public static void main(String[] args) {
        //单个文件转换
        office2PDF("需要转换的word文件路径", "转换后输出pdf文件的路径");
        //多个文件转换
        String path = "多个word文件所在的目录";
        File f = new File(path);
        office.getFile(f);
    }

}

 

使用pdf.js插件在线预览pdf文件

  pdf文件转好后,开始使用pdf.js插件对pdf文件进行在线预览操作

  下载pdf.js插件,进行解压,进入解压后的目录 build/build/generic,generic中的目录,如下图所示

 

技术图片

技术图片

 

进入web目录,找到viewer.js文件,打开,

 

技术图片

  

找到这行代码,这里是指定打开默认的pdf文件,在web目录中存在一个同名的pdf文件,这个就是默认打开的文件。在pdf.js中,主要的文件有两个,viewer.js以及viewer.html,前者负责打开pdf文件,后者负责渲染效果,将generic文件,复制到tomcat中(我这里用的tomcat,根据自己实际情况即可),启动tomcat,

通过访问路径 http://localhost:8080/build/generic/web/viewer.html 可以看到效果,打开默认的pdf文件,如图

 

技术图片

 

此时,再看viewer.js,找到如下代码,

 

技术图片

 

说明,我们可以通过file传参的形式,来访问我们想访问的pdf文件,所以,删除js文件中默认的pdf文件,将DEFAULT置空

 

技术图片

 

然后,我们访问带file参数的路径,访问我们自己的pdf文件,将pdf文件放在指定的路径下,这里我直接放在了web下,可以自己指定路径,

访问路径:http://localhost:8080/build/generic/web/viewer.html?file=FJ050609150001.pdf,效果如图

 

技术图片

 

按钮隐藏

 这样我们就访问到了我们想要的pdf文件。很多时候,线上预览,是不允许有下载和打印的,如上图右上角的打印和下载按钮,我们都可以通过修改viewer.html里面的按钮属性,来进行隐藏。打开viewer.html文件,找到如下代码

 

技术图片

然后在<button>标签内部,加上隐藏样式:style="visibility:hidden",就可以隐藏下载或者是打印按钮

技术图片

 

添加后,效果如图

 

技术图片

 

注意:

1,常用的隐藏标签方法有,style="visibility:hidden",style = "display:none"等等,但是只能使用style="visibility:hidden"来隐藏标签(其余的我也试过,但是不管用,隐藏不了)。

2,viewer.html中有两个地方有按钮,如图,

 

技术图片

 

以及

 

技术图片

 

我们要设置隐藏的,只有下面的一组按钮标签,上面的不能设置隐藏,否则,可能会报错。

 

3,按钮标签不能删除,否则可能会报错,并且,pdf.js是比较简单的在线浏览pdf文件的插件,我们只需要改动viewer.js和viewer.html就可以实现,其他的地方不用改动,否则会报错。

pdf.js实现图片在线预览

标签:span   source   代码   结束   null   端口   pen   main   localhost   

原文地址:https://www.cnblogs.com/love-daodao/p/11072282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!