js 实现 pdf 在线预览 打印 【完整版

2018-8-7 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1.说下需求:点击标题  跳转  预览的pdf  页,下载功能 可选【最好有】。

2.实现结果 :

 

 

3.代码实现:

依赖pdf.js  【需要下载完整  控件】

下载官网:http://mozilla.github.io/pdf.js/

点击  ‘Download ’   到下载页

 

git 克隆  或者下载。

下载后文件长这样:

【重点在后面   项目如何部署组装】

1.新建一个空项目   把文件放到项目根目录下:

 

红色圈里 是官网下载的  就改个文件名字,然后拖进项目里,完全不用动里面任何文件记住,有需要另说。

绿色是我写的【dowwn.html   是测试文件;static  放pdf  文件】 下面贴代码:

list.html


	
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-touch-fullscreen" content="yes">
  8. <meta name="full-screen" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="format-detection" content="telephone=no">
  11. <meta name="format-detection" content="address=no">
  12. <title>list</title>
  13. <style>
  14. *{
  15. margin: 0;
  16. padding: 0;
  17. }
  18. .title{
  19. background: #e50041;
  20. color: #ffffff;
  21. font-size: 16px;
  22. }
  23. .title{
  24. padding:10px 10px ;
  25. }
  26. ul{
  27. padding:0px 10px 10px 10px ;
  28. }
  29. li{
  30. list-style: none;
  31. border-bottom: 1px solid #eeeeee;
  32. height: 50px;
  33. line-height:50px;
  34. }
  35. a{
  36. text-decoration: none;
  37. color: #000;
  38. }
  39. .leftImg{
  40. width: 30px;
  41. vertical-align: middle;
  42. }
  43. .next{
  44. float: right;
  45. /*vertical-align: middle;*/
  46. margin-top: 4.5%;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <p class="title">产品说明书</p>
  52. <ul>
  53. <li dataSrc = 'KD-122LA火灾探测报警器说明书.pdf' onclick="fun(this)">
  54. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span> <img class="next" src="img/next.png" alt="">
  55. </li>
  56. <li dataSrc = 'KD-212LA可燃气体探测器说明书.pdf' onclick="fun(this)">
  57. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
  58. </li>
  59. <li dataSrc = 'KD-216LA可燃气体探测器说明书.pdf' onclick="fun(this)">
  60. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
  61. </li>
  62. <li dataSrc = 'Kd-122LA_KD-601系统遥控器使用说明.pdf' onclick="fun(this)">
  63. <img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span> <img class="next" src="img/next.png" alt="">
  64. </li>
  65. <li dataSrc = 'KD-602LA_SOS一键救助使用说明书.pdf' onclick="fun(this)">
  66. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一键救助使用说明书</span> <img class="next" src="img/next.png" alt="">
  67. </li>
  68. <li dataSrc = 'KD-701LA_溢水探测器使用说明书.pdf' onclick="fun(this)">
  69. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
  70. </li>
  71. <li dataSrc = 'KD-702LA红外人体移动探测器说明书.pdf' onclick="fun(this)">
  72. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span> <img class="next" src="img/next.png" alt="">
  73. </li>
  74. <li dataSrc = 'KD-703LA_门窗探测器使用说明书.pdf' onclick="fun(this)">
  75. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 门窗探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
  76. </li>
  77. <li dataSrc = 'KD-805A_WiFi系统主机使用说明书_V1.00.pdf' onclick="fun(this)">
  78. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系统主机使用说明书_V1.00</span> <img class="next" src="img/next.png" alt="">
  79. </li>
  80. <li dataSrc = 'WIFI智慧家庭安防系统操作说明书_v0.01.pdf'onclick="fun(this)">
  81. <img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span> <img class="next" src="img/next.png" alt="">
  82. </li>
  83. </ul>
  84. <script src="js/jquery.min.js"></script>
  85. <script>
  86. function fun(e){
  87. // console.log(e);
  88. var dataSrc = $(e).attr('dataSrc');
  89. // console.log(dataSrc);
  90. // sessionStorage.setItem('dataSrc',dataSrc);
  91. // window.location.href='index.html'
  92. var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
  93. $.ajax({
  94. url: urlSrc,
  95. type: "get",
  96. success: function(xhr, data){
  97. if (navigator.userAgent.indexOf('Android') > -1) {
  98. //判断移动端是android 还是ios ,若是android 则要借助pdf插件
  99. window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
  100. } else {
  101. //ios直接打开pdf
  102. //window.location.href = url;
  103. window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
  104. }
  105. },
  106. error: function(){
  107. //window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
  108. window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
  109. }
  110. });
  111. }
  112. </script>
  113. </body>
  114. </html>

完毕!

注意:

本地测试不了,http://testweixin.kingdun.net.cn   是我们运维小哥哥发版后的服务器。我写本地不对,你也可以 node.js 自己搭个服务器。

注释:window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?    直接跳转到 万能的pdf 组件里的html 页,该有的  国际化和下载打印功能   人家都写好了!

【兼容性】:苹果手机:直接预览,手机系统自带的,但是 不能下载 (有得必有失),可以在 别的应用中打开  例如  wps。

                       安卓:可预览 ,可下载,在手机默认浏览器打开  可支持下载,本人小米8,uc浏览器 下载乱码,但是 小米自带浏览器 可下载pdf文件。

交差。

 

彩蛋:down.html 


	
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-touch-fullscreen" content="yes">
  8. <meta name="full-screen" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="format-detection" content="telephone=no">
  11. <meta name="format-detection" content="address=no">
  12. <title>list</title>
  13. <style>
  14. *{
  15. margin: 0;
  16. padding: 0;
  17. }
  18. .title{
  19. background: #e50041;
  20. color: #ffffff;
  21. font-size: 16px;
  22. }
  23. .title{
  24. padding:10px 10px ;
  25. }
  26. ul{
  27. padding:0px 10px 10px 10px ;
  28. }
  29. li{
  30. list-style: none;
  31. border-bottom: 1px solid #eeeeee;
  32. height: 50px;
  33. line-height:50px;
  34. }
  35. a{
  36. text-decoration: none;
  37. color: #000;
  38. }
  39. .leftImg{
  40. width: 30px;
  41. vertical-align: middle;
  42. }
  43. .next{
  44. float: right;
  45. /*vertical-align: middle;*/
  46. margin-top: 4.5%;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <p class="title">产品说明书</p>
  52. <a href="static/1.pdf">00001</a>
  53. </body>
  54. </html>

哈哈,直接a 标签   href 跳转  pdf文件;也是ok的哦!【苹果手机:直接预览;;;安卓:下载 链接 】


标签: js 实现 pdf 在线预览 打印 【完整版


Powered by emlog 京ICP备12006971号-1 sitemap