pdf.js的使用 （1） 站在巨人的肩膀上純干貨分享，沒有華麗的詞藻

 請耐着性子看完再上手，不難的，全實戰干貨分享，超詳細教程，所見即所得 （pc端和移動端都可以！！！親測 超給力）

以下是我在實際項目開發中的過程分享   前端是:vue+jsp

1.首先下載pdf.js（怎么下可以去百度），實在不會就私我，我發給你

　　1.1展示一哈我下載下來的pdf.js的目錄結構

　　

 

　　1.2接下來可以直接打開viewer.html在瀏覽器里看看效果，整個頁面樣式還是非常美觀的   而且是純js寫的，真心佩服老外

　　關於頁面的樣式你也可以完全自己寫不用他的，我實力不允許啊（哭笑！！！）

　　

 

　　這個打開的是它默認的xxxxxKey-pldi-09.pdf文件   看源碼在viewer.js里面的5153行（這個行號可能會有些差異）自己去找找看,如果以后要加什么功能基本也是在viewer.js文件里

　　

    好了如果你進行到這一步就可以教你怎么調用這個pdf查看器了

2.然后把pdf.js放入你的項目里面（就是把整個pdfJs文件夾拷貝到你的項目靜態資源文件下面,可以把locale文件夾里面除了中英文的東西刪了）

　　

　　2.1 開始調用 方式（一）

　　<%--方式一 直接在你要寫的html頁面用iframe標簽嵌入插件的viewer.html頁面 file 參數就是pdf文件的路徑--%>

　　<%--<iframe id="pdf" width="100%" height="800" src="${sysHostUrl }/static/js/pdfJs/web/viewer.html?file=Vue.js.pdf&downloadFlag=false"></iframe>--%>

　　//或者從遠程服務器去獲取pdf文件 如：

　　注意：用這種方式調用的話會報一個錯 

 

file origin does not match viewer's    這應該是跨域問題

 

<iframe src="/static/js/pdfJs/web/viewer.html?file=http://ip地址:9999/file/2020/5/13/20200513170332512.pdf"></iframe>

解決方法：在viewer.js文件里面搜索 file origin does not match viewer's  把這個條件注釋掉就ok了

題外話：我在手機端用這種方式是不會報這個錯的

window.onload = function() {
//打開一個新的窗體
window.open("js/pdfJs/web/viewer.html?file=http://ip地址:9999/file/2020/5/13/20200513170332512.pdf");
}

 

2.2 開始調用 方式（二）（重點！重點！重點！）

//獲取流文件的方式預覽pdf文件 后端java代碼

@GetMapping(value = "downPDF.do")
    public void downPDF(String ArchiveDetailUUID, HttpServletRequest request, HttpServletResponse response) {
        try {
            AfArchivedetail entity = afArchivedetailService.findDataPDF(ArchiveDetailUUID);
            if (entity != null && entity.getPdfData()!=null) {
                String filename = entity.getOriginalFileName() + ".pdf";
                //文件二進制數組
                byte[] buffer = entity.getPdfData();
                // 設置response的Header
                response.addHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(filename, "UTF-8"));
                response.setContentType("application/octet-stream");
                OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
                toClient.write(buffer);
                toClient.flush();
                toClient.close();
            }else{
                return;
            }
        } catch (IOException ex) {
            LogerHelper.WebLog(ex.getMessage());
            return;
        }
    }

 

//var pdfUrl="/webApi/downPDF.do?ArchiveDetailUUID="+uuid+"&number="+Math.random();//這是后台接口獲取流（根據需要換成你自己的接口哦！）

window.location.href = "/static/js/pdfJs/web/viewer.html?file=/webApi/downPDF.do?ArchiveDetailUUID="+297e82ec6ec57a1e016ec57fdfc90000
+"&number="+Math.random()+"&local="+'${curLang}'+"&downloadFlag=false;

說明:我們在實際應用中，可能會根據不同的參數，來選擇展示不同的pdf文件，此時就涉及到傳參的問題了，仔細觀察上面這段url地址會發現，
在file請求參數中的值為一個url地址，而這個url地址又追加了自己的請求參數，這就導致一個url地址中出現2個"?"導致瀏覽器不能正常解析這段url！
所以需要用到js中的encodeURIComponent()來進行編碼，然后viewer.js里會自動對編碼的內容進行解碼，

window.location.href = "/static/js/pdfJs/web/viewer.html?file=" + encodeURIComponent(pdfUrl)+"&local="+'${curLang}'+"&downloadFlag=false;

downloadFlag=false 這個參數是我用來控制viewer.html的打印，下載，上傳按鈕的(如果viewer.html頁面上有不要的控件可以通過這種方式來隱藏，我嘗試過把不需要的按鈕直接在viewer.html刪除掉，發現不行會報錯)

"&local="+'${curLang}'這個參數是我用來做中英文切換的

解碼方法可以在插件的viewer.js里找到如下：

 

 看到return params是不是想到和圖四畫紅圈的部分掛上關系了，沒錯就是的。

這樣就ok啦。下面的兩種方式也是同樣的道理，只不過在頁面上調用的方式不同罷了‘

看一下我的效果吧

 

　
 2.3 開始調用 方式（三）
<%--var pdfUrl="/xxx/viewPDF.do?xxxUUID=ff8080816c93498b016c934a1c3f0000";--%>
/*<h1 onclick="detail()">點擊查看PDF文件</h1>

function detail() {
 //打開一個新的窗體
 window.open("/static/js/pdfJs/web/viewer.html?file="+encodeURIComponent(pdfUrl));
 }*/

2.4 開始調用 方式（四）

<%--方式三 彈窗iframe--%>

/*<h1 onclick="detail()">點擊查看PDF文件</h1>
function detail() {
    layer.open({
        type: 2,
        title: false,
        //closeBtn: 0,
        area: ['99%', '89%'],//寬，高
        //skin: 'layui-layer-nobg', //沒有背景色
        shadeClose: false,
        content: ['/xxx/viewPDF.do?xxxUUID=ff8080816c93498b016c934ae7d10001', 'no'],
    });
}*/
  
結語：
剛開始需求說要做一個pdf預覽功能的時候我也是很萌逼的,就在網上參考了很多前輩們經驗才做出來的,后面又加了一些其它的功能，有時間再寫吧

想做一個對社會有貢獻的人，喜歡分享 哈哈哈！

附上一些參考博客地址：
https://blog.csdn.net/jianyuerensheng/article/details/79570781
https://www.cnblogs.com/kagome2014/p/kagome2014001.html
https://www.cnblogs.com/lvmylife/p/6651672.html

pdf.js下載：https://mozilla.github.io/pdf.js/

pdf.jsGit:https://github.com/mozilla/pdf.js#readme