超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

js 實(shí)現(xiàn) pdf 在線預(yù)覽 打印 【完整版

2018-8-7    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

1.說(shuō)下需求:點(diǎn)擊標(biāo)題  跳轉(zhuǎn)  預(yù)覽的pdf  頁(yè),下載功能 可選【最好有】。

2.實(shí)現(xiàn)結(jié)果 :

 

 

3.代碼實(shí)現(xiàn):

依賴pdf.js  【需要下載完整  控件】

下載官網(wǎng):http://mozilla.github.io/pdf.js/

點(diǎn)擊  ‘Download ’   到下載頁(yè)

 

git 克隆  或者下載。

下載后文件長(zhǎng)這樣:

【重點(diǎn)在后面   項(xiàng)目如何部署組裝】

1.新建一個(gè)空項(xiàng)目   把文件放到項(xiàng)目根目錄下:

 

紅色圈里 是官網(wǎng)下載的  就改個(gè)文件名字,然后拖進(jìn)項(xiàng)目里,完全不用動(dòng)里面任何文件記住,有需要另說(shuō)。

綠色是我寫(xiě)的【dowwn.html   是測(cè)試文件;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">產(chǎn)品說(shuō)明書(shū)</p>
  52. <ul>
  53. <li dataSrc = 'KD-122LA火災(zāi)探測(cè)報(bào)警器說(shuō)明書(shū).pdf' onclick="fun(this)">
  54. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火災(zāi)探測(cè)報(bào)警器說(shuō)明書(shū)ccc</span> <img class="next" src="img/next.png" alt="">
  55. </li>
  56. <li dataSrc = 'KD-212LA可燃?xì)怏w探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)">
  57. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃?xì)怏w探測(cè)器說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  58. </li>
  59. <li dataSrc = 'KD-216LA可燃?xì)怏w探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)">
  60. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃?xì)怏w探測(cè)器說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  61. </li>
  62. <li dataSrc = 'Kd-122LA_KD-601系統(tǒng)遙控器使用說(shuō)明.pdf' onclick="fun(this)">
  63. <img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系統(tǒng)遙控器使用說(shuō)明</span> <img class="next" src="img/next.png" alt="">
  64. </li>
  65. <li dataSrc = 'KD-602LA_SOS一鍵救助使用說(shuō)明書(shū).pdf' onclick="fun(this)">
  66. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一鍵救助使用說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  67. </li>
  68. <li dataSrc = 'KD-701LA_溢水探測(cè)器使用說(shuō)明書(shū).pdf' onclick="fun(this)">
  69. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探測(cè)器使用說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  70. </li>
  71. <li dataSrc = 'KD-702LA紅外人體移動(dòng)探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)">
  72. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA紅外人體移動(dòng)探測(cè)器說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  73. </li>
  74. <li dataSrc = 'KD-703LA_門(mén)窗探測(cè)器使用說(shuō)明書(shū).pdf' onclick="fun(this)">
  75. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 門(mén)窗探測(cè)器使用說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt="">
  76. </li>
  77. <li dataSrc = 'KD-805A_WiFi系統(tǒng)主機(jī)使用說(shuō)明書(shū)_V1.00.pdf' onclick="fun(this)">
  78. <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系統(tǒng)主機(jī)使用說(shuō)明書(shū)_V1.00</span> <img class="next" src="img/next.png" alt="">
  79. </li>
  80. <li dataSrc = 'WIFI智慧家庭安防系統(tǒng)操作說(shuō)明書(shū)_v0.01.pdf'onclick="fun(this)">
  81. <img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系統(tǒng)操作說(shuō)明書(shū)_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. //判斷移動(dòng)端是android 還是ios ,若是android 則要借助pdf插件
  99. window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
  100. } else {
  101. //ios直接打開(kāi)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>

完畢!

注意:

本地測(cè)試不了,http://testweixin.kingdun.net.cn   是我們運(yùn)維小哥哥發(fā)版后的服務(wù)器。我寫(xiě)本地不對(duì),你也可以 node.js 自己搭個(gè)服務(wù)器。

注釋:window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?    直接跳轉(zhuǎn)到 萬(wàn)能的pdf 組件里的html 頁(yè),該有的  國(guó)際化和下載打印功能   人家都寫(xiě)好了!

【兼容性】:蘋(píng)果手機(jī):直接預(yù)覽,手機(jī)系統(tǒng)自帶的,但是 不能下載 (有得必有失),可以在 別的應(yīng)用中打開(kāi)  例如  wps。

                       安卓:可預(yù)覽 ,可下載,在手機(jī)默認(rèn)瀏覽器打開(kāi)  可支持下載,本人小米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">產(chǎn)品說(shuō)明書(shū)</p>
  52. <a href="static/1.pdf">00001</a>
  53. </body>
  54. </html>

哈哈,直接a 標(biāo)簽   href 跳轉(zhuǎn)  pdf文件;也是ok的哦!【蘋(píng)果手機(jī):直接預(yù)覽;;;安卓:下載 鏈接 】


分享本文至:

日歷

鏈接

個(gè)人資料

存檔