快捷導(dǎo)航

vue使用pdf.js預(yù)覽pdf文件的方法

更新時(shí)間：2021年12月20日 14:41:19 作者：奔跑的哈密瓜

在頁(yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來(lái)通過(guò)本文給大家介紹vue使用pdf.js來(lái)進(jìn)行pdf預(yù)覽,需要的朋友可以參考下

我們?cè)陧?yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于有些文件不能夠進(jìn)行打印和下載，這時(shí)候我們使用window自帶的pdf就很難滿足客戶的需求，因此需要另外的辦法來(lái)支持我們進(jìn)行特殊條件的pdf文件預(yù)覽，這里我采用引入pdf.js文件的形式來(lái)達(dá)到目的。

第一步：下載pdf.js　　

　　　　引入pdf.js文件

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

第二步，vue引入

　　我這里是把下載下來(lái)的文件放在了根目錄的piblic下

第三步，使用

　　主要是地址"/build/generic/web/viewer.html?file="+href，href為請(qǐng)求后端返回的文件路徑或者后端返回文件流前段解析后生成的文件路徑，前面拼接上/build/generic/web/viewer.html?file=，地址為自己引入pdf.js文件的路徑，也可以直接這樣寫/build/generic/web/viewer.html，他會(huì)直接去找。下面我使用的是前段解析文件流生成地址預(yù)覽的。

　　預(yù)覽方法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); //創(chuàng)建下載的鏈接
                    window.open("/build/generic/web/viewer.html?file="+href);
                }
            })

最后

　　如果你想要的禁掉pdf文件的下載、打印等功能，最簡(jiǎn)單的方法是，找的自己導(dǎo)入文件里的viewer.html，路徑為build下的generic文件夾下的web里的viewer.html，如下：