pdf.js实现图片在线预览

程序员文章站 2022-10-08 20:05:47

项目需求前段时间项目中遇到了一个模块，是关于在线预览word文档（PDF文件）的，所以，找了很多插件，例如，pdf.js，pdfobject.js框架，但是pdfobject.js框架对于IE浏览器不兼容，所以，选择了使用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中的目录，如下图所示

pdf.js实现图片在线预览

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

pdf.js实现图片在线预览

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

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

pdf.js实现图片在线预览