标签：显示 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端
移动端
标签：显示 work href com 下载地址 targe 效果 nbsp prim
原文地址：https://www.cnblogs.com/shenlin/p/9017868.html
