利用psd.js实现pdf文件在web端和移动端均可阅读

缘由:近期开发的项目中,需要向用户展示《**大学**年度的就业质量报告》,因为项目是移动端优先,利用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 id="page_count"></button>
  <a class="btn btn-danger hidden-xs" id="quanping" href="" target="_blank" style="margin-top: 0px;">全屏查看</a>
</div><br /><br />

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端和移动端均可阅读

移动端

利用psd.js实现pdf文件在web端和移动端均可阅读

相关推荐