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

时间: 2024-08-25 06:54:03

pdf.js实现图片在线预览的相关文章

Java实现office文档与pdf文档的在线预览功能

最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完.查找资料发现我们要实现的过程就是把office转换成pdf,当然pdf就不用转换了.然后在pdf转换为swf文件,在浏览器实现预览swf文件.整个过程就是这样,看起来很简单,实际操作起来会出现各种问题.下面我就把自己写的这一小功能记录下来. 1.首先我们需要找到可以把office转换成pdf的方法

单张图片在线预览+图片压缩

该方法未测试浏览器兼容性,仅在谷歌上进行过测试. 图片在线预览:一般思路是通过获取file上的绝对路径并将路径赋值给src实现在线预览功能,但现实中的浏览器,尤其是高版本浏览器由于用户安全性考虑,不会让开发者通过file获取到绝对路径,因此使用H5中的画板功能,将图片进行重绘后,得到base64编码的dataURL,再将这个地址赋值给src实现在线预览功能. 图片压缩原理:将大图根据预定尺寸进行尺寸修改. <!DOCTYPE html> <html lang="en"

cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 3. 此处后端使用的nodejs,不过不懂node的影响也不大. 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn"

html5上传本地图片,在线预览及裁剪(filereader,canvas)

1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewImage(file) { if (file.files && file.files[0]) { var img = document.getElementById('imghead'); var reader = new FileReader(); //读取file完成之后加载 reader.o

Office在线预览及PDF在线预览的实现方式大集合

一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免费的swftools.exe工具生成swf格式的Flash文件,网页中加载flexpaper免费开源工具(有广告)实现Flash文件的预览.优点:1.有效的保护的源文件及文件的复制,不可复制也是缺点.2.源码是自己的,版权有保证.缺点:1.服务器上必须安装Office软件.2.导出PDF文件本身是个

Office在线预览及PDF在线预览的实现方式史上最全大集合

Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免费的swftools.exe工具生成swf格式的Flash文件,网页中加载flexpaper免费开源工具(有广告)实现Flash文件的预览.优点:1.有效的保护的源文件及文件的复制,不可复制也是缺点.2.源码是自己的,版权有保证.缺点:1.服务器

借助flexpaper实现word在线预览和打印

为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展现方式就成为了首选的解决方案.该方案的实现过程主要是先将word文档转换成pdf文档,接着再通过SWFTOOLS工具将pdf文档转换成swf文件,然后flexpaper加载这些swf文件进行展示. 访问flexpaper的官网地址:http://flexpaper.devaldi.com/downl

用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视频播放组

java实现word转pdf在线预览(前端使用PDF.js;后端使用openoffice、aspose)

背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大概有这么几种方案: 1.word转html然后转pdf 2.Openoffice + swftools + Flexmapper + jodconverter 3.kkFileView 分析之后最后决定使用Openoffice+PDF.js方式实现 环境搭建 1.安装Openoffice,下载地址: