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