pdf.js实现图片在线预览

 

项目需求

　　前段时间项目中遇到了一个模块，是关于在线预览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就能够实现，其余的地方不用改动，不然会报错。

原文出处：https://www.cnblogs.com/love-daodao/p/11072282.html