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

Posted 2020-11-03 shenlin

缘由：近期开发的项目中，需要向用户展示《**大学**年度的就业质量报告》，因为项目是移动端优先，利用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端

 

移动端