關於html頁面展現pdf檔案，並隱藏列印、下載等按鈕的總結
阿新 • • 發佈：2018-11-30
關於html頁面展現pdf檔案，並隱藏列印、下載等按鈕的總結
由於專案需求，要在頁面預覽pdf檔案而不能提供下愛列印功能，故在網上查詢了一些前輩的經驗，自己也嘗試了一番，現在講經驗總結一下。
- pdfobject.js
- jquery.media.js
- pdf.js
一、 pdfobject.js
1.下載：https://pdfobject.com/
2.匯入相關js
3.例項
<!DOCTYPE html> <html> <meta charset="utf-8"> <head th:include="include :: header"> </head> <style type="text/css"> #toolbarViewerRight{ display: none; } html,body,#pdf_viewer{ width: 100%; height: 100%; margin: 0; padding: 0; } </style> <body class="gray-bg"> <div id="pdf_viewer"></div> <div th:include="include::footer"></div> <script src="/js/pdfobject.js"></script> <script type="text/javascript"> if(PDFObject.supportsPDFs){ // PDF嵌入到網頁 var options = { pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'} //禁用工具欄程式碼 }; PDFObject.embed("/files/45b50092-ec22-457f-8a6e-b18d832d885b.pdf", "#pdf_viewer",options); } else { alert("瀏覽器不支援"); } </script> </body> </html>
4.備註：有一點需要說明，在網上看到很多使用new PDFObject()方法建立的，但是嘗試之後都是失敗，並且網上提示使用設定“ pdfOpenParams: { scrollbars: ‘0’, toolbar: ‘0’, statusbar: ‘0’} ”來禁用下載列印功能也無效，不知是不是我使用有誤
二、 jquery.media.js
下載js後直接匯入
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>線上預覽PDF文件</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.media.js"></script> <script type="text/javascript"> $(function() { $('a.media').media({width:800, height:600}); }); </script> </head> <body> <center> <div class="panel panel-primary"> <div class="panel-heading" align="center"> <h2>預覽pdf檔案</h2> </div> <div class="panel-body"> <a class="media" href="yulan.pdf"></a> </div> </center> </body> </html>
備註：給js也無法做到遮蔽下載、列印按鈕。
三、 pdf.js
pdf.js下載：https://mozilla.github.io/pdf.js/
關於pdf.js的來源就不做詳解了，直接上程式碼
`匯入之後，直接在js中呼叫
function show(){ var curWwwPath=window.document.location.href; var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); var localhostPath=curWwwPath.substring(0,pos); window.open(localhostPath+"/pdfjs/web/viewer.html?file=/files/fe34e38c-fb0f-450e-9bc8-3afc35101a80.pdf"); }`
備註：該方法可以遮蔽列印及下載的操作按鈕，但是隻能做到頁面隱藏