欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

js 實(shí)現(xiàn) pdf 在線(xiàn)預(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)：

依賴(lài)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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="full-screen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <title>list</title> <style> *{ margin: 0; padding: 0; } .title{ background: #e50041; color: #ffffff; font-size: 16px; } .title{ padding:10px 10px ; } ul{ padding:0px 10px 10px 10px ; } li{ list-style: none; border-bottom: 1px solid #eeeeee; height: 50px; line-height:50px; } a{ text-decoration: none; color: #000; } .leftImg{ width: 30px; vertical-align: middle; } .next{ float: right; /*vertical-align: middle;*/ margin-top: 4.5%; } </style> </head> <body> <p class="title">產(chǎn)品說(shuō)明書(shū)</p> <ul> <li dataSrc = 'KD-122LA火災(zāi)探測(cè)報(bào)警器說(shuō)明書(shū).pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'KD-212LA可燃?xì)怏w探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'KD-216LA可燃?xì)怏w探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'Kd-122LA_KD-601系統(tǒng)遙控器使用說(shuō)明.pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'KD-602LA_SOS一鍵救助使用說(shuō)明書(shū).pdf' onclick="fun(this)"> <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一鍵救助使用說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt=""> </li> <li dataSrc = 'KD-701LA_溢水探測(cè)器使用說(shuō)明書(shū).pdf' onclick="fun(this)"> <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探測(cè)器使用說(shuō)明書(shū)</span> <img class="next" src="img/next.png" alt=""> </li> <li dataSrc = 'KD-702LA紅外人體移動(dòng)探測(cè)器說(shuō)明書(shū).pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'KD-703LA_門(mén)窗探測(cè)器使用說(shuō)明書(shū).pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'KD-805A_WiFi系統(tǒng)主機(jī)使用說(shuō)明書(shū)_V1.00.pdf' onclick="fun(this)"> <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=""> </li> <li dataSrc = 'WIFI智慧家庭安防系統(tǒng)操作說(shuō)明書(shū)_v0.01.pdf'onclick="fun(this)"> <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=""> </li> </ul> <script src="js/jquery.min.js"></script> <script> function fun(e){ // console.log(e); var dataSrc = $(e).attr('dataSrc'); // console.log(dataSrc); // sessionStorage.setItem('dataSrc',dataSrc); // window.location.href='index.html' var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc; $.ajax({ url: urlSrc, type: "get", success: function(xhr, data){ if (navigator.userAgent.indexOf('Android') > -1) { //判斷移動(dòng)端是android 還是ios ，若是android 則要借助pdf插件 window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc; } else { //ios直接打開(kāi)pdf //window.location.href = url; window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc; } }, error: function(){ //window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname; window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc; } }); } </script> </body> </html>

完畢！

注意：

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

注釋?zhuān)?/span>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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="full-screen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <title>list</title> <style> *{ margin: 0; padding: 0; } .title{ background: #e50041; color: #ffffff; font-size: 16px; } .title{ padding:10px 10px ; } ul{ padding:0px 10px 10px 10px ; } li{ list-style: none; border-bottom: 1px solid #eeeeee; height: 50px; line-height:50px; } a{ text-decoration: none; color: #000; } .leftImg{ width: 30px; vertical-align: middle; } .next{ float: right; /*vertical-align: middle;*/ margin-top: 4.5%; } </style> </head> <body> <p class="title">產(chǎn)品說(shuō)明書(shū)</p> <a href="static/1.pdf">00001</a> </body> </html>

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

藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

« 【2018下半場(chǎng)】設(shè)計(jì)趨勢(shì)之抽象設(shè)計(jì)，趕快上車(chē) 頁(yè)面中不能承受之——多重引導(dǎo)如何處理？ »

分類(lèi)

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn

存檔

欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

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

注意：

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

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

安卓：可預(yù)覽 ，可下載，在手機(jī)默認(rèn)瀏覽器打開(kāi) 可支持下載，本人小米8，uc瀏覽器 下載亂碼，但是 小米自帶瀏覽器 可下載pdf文件。

交差。

彩蛋：down.html

分類(lèi)

日歷

鏈接

個(gè)人資料

存檔

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

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

安卓：可預(yù)覽，可下載，在手機(jī)默認(rèn)瀏覽器打開(kāi) 可支持下載，本人小米8，uc瀏覽器下載亂碼，但是小米自帶瀏覽器可下載pdf文件。