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就可以實現,其他的地方不用改動,否則會報錯。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM