1. 程式人生 > 其它 >vue使用pdf.js來進行pdf預覽

vue使用pdf.js來進行pdf預覽

我們在頁面進行pdf預覽的時候,由於有些檔案不能夠進行列印和下載,這時候我們使用window自帶的pdf就很難滿足客戶的需求,因此需要另外的辦法來支援我們進行特殊條件的pdf檔案預覽,這裡我採用引入pdf.js檔案的形式來達到目的。

第一步:下載pdf.js  

    引入pdf.js檔案

    地址如下:http://mozilla.github.io/pdf.js/getting_started/#download

    

第二步,vue引入

  我這裡是把下載下來的檔案放在了根目錄的piblic下

第三步,使用

  主要是地址"/build/generic/web/viewer.html?file="+href,href為請求後端返回的檔案路徑或者後端返回檔案流前段解析後生成的檔案路徑,前面拼接上/build/generic/web/viewer.html?file=,地址為自己引入pdf.js檔案的路徑,也可以直接這樣寫/build/generic/web/viewer.html,他會直接去找。下面我使用的是前段解析檔案流生成地址預覽的。

  預覽方法window.open("/build/generic/web/viewer.html?file="+href);

        axios({
                method: 'get',
                url:url,
                headers: {
                    "token":auth,
                },
                responseType: 'blob',
            }).then(response => {
                type_ 
= type_.toLowerCase(); if (type_ == "docx") { that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document" } else if (type_ == "doc") { that._type_ = "application/msword" } else if (type_ == "gif") { that._type_
= "image/gif" } else if (type_ == "jpeg" || type_ == "jpg") { that._type_ = "image/jpeg" } else if (type_ == "png") { that._type_ = "image/png" } else if (type_ == "pdf") { that._type_ = "application/pdf" } else if (type_ == "txt") { that._type_ = "text/plain;charset=utf-8'" } else if (type_ == "xls") { that._type_ = "application/vnd.ms-excel" } else if (type_ == "xlsx") { that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }else if (type_ == "zip") { that._type_ = "application/zip" } else if (type_ == "ppt") { that._type_ = "application/vnd.ms-powerpoint" } else if (type_ == "pptx") { that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation" } if(type_ == "pdf"){ var blob = new Blob([response.data], { type: that._type_ }) var href = window.URL.createObjectURL(blob); //建立下載的連結 window.open("/build/generic/web/viewer.html?file="+href); } })

最後

  如果你想要的禁掉pdf檔案的下載、列印等功能,最簡單的方法是,找的自己匯入檔案裡的viewer.html,路徑為build下的generic資料夾下的web裡的viewer.html,如下:

  

  在這個html裡找到對應下載的dom直接display:none就可以,切記不可以注掉,注掉會報錯。如下,紅色框中,一個是下載一個是列印,直接隱藏就可以。

如果有人問這樣也不安全,那可以和客戶商量不在頁面展示,因為只要頁面可以看到的東西,截圖也可以截下來,註定是不安全的。