利用psd.js實現pdf檔案在web端和移動端均可閱讀

標籤：顯示   work   href   com      targe   效果   nbsp   prim   

緣由：近期開發的項目中，需要向使用者展示《**大學**年度的就業品質報告》，因為項目是移動端優先，利用bootstrap進行的前端開發。

經曆：web端實現比較容易，但是到了移動端就不顯示了，後來百度了一下資料，發現pdf.js可以在移動端展示pdf檔案，於是開始瞭解。

傳送門：pdf.js,連結地址為pdf.js網站入門學習部分。

執行個體代碼：

HTML前端展示部分

<!--pdf展示區--> <p align="center"><canvas id="the-canvas"></canvas></p><!--pdf控制區--><div id="pdf-content">　　<button id="prev" class="btn btn-success">上一頁</button>　　<button id="next" class="btn btn-primary">下一頁</button>　　<button class="btn btn-info">頁數: <span id="page_num"></span> / <span id="page_count"></span></button>　　<a class="btn btn-danger hidden-xs" id="quanping" href="" target="_blank" style="margin-top: 0px;">全屏查看</a></div>

　　js引入

<script src="/Public/js/pdf.js"></script><script src="/Public/js/jquery.min.js"></script><script src="/Public/js/pdf-worker.js"></script>

　　pdf.js、pdf-worker.js、jq（百度網盤）：連結：https://pan.baidu.com/s/1DLk6yWt_HKtpjFNOambh4Q 密碼：x7zc

通過下方的js，在btnutl中擷取後台傳遞的pdf路徑，並將路徑賦值給quanping，一是為了全屏能夠直接開啟pdf檔案，二是在pdf.js檔案中能夠擷取到pdf的路徑。

<script>/* 網域名稱*/var http = location.protocol;/* 協議*/var yuming = window.location.host;var quanping = document.getElementById(‘quanping‘);var btnurl = http + "//" + yuming + "/Public/Uploads/baogao/20180425/5ae028774d38d.pdf";quanping.setAttribute(‘href‘,btnurl);</script>

　　最終實現效果如下

web端

 

移動端

利用psd.js實現pdf檔案在web端和移動端均可閱讀