前面做個幾個簡單的測試html布局排版的頁面,都是在瀏覽器上查看的,C-LODOP可通過集中打印和廣域網AO打印方式,讓手機等也可以打印預覽和打印。
集中打印的大體方法是通過一台windows電腦作為雲主機,然后手機等通過瀏覽器訪問狀態windows雲主機上的打印機進行打印。廣域網AO打印的端橋打印方式,是通過一台windows雲主機作為雲服務器,然后需要打印的客戶端也需要一台windows電腦安裝c-lodop並開啟端橋,指向那台雲服務器,實際打印端是在windows端橋端。
由於c-lodop只能安裝到Windows系統上,且用的是按照到windows系統的打印機,所以雖然是手機打印,上述兩種方法也需要借助windows完成,只有特殊AO打印機那種,不需要端橋的打印端windows系統,可直接發送到特殊AO打印機。(普通打印機 只能用端橋模式或集中打印模式),以前的相關博文:c-lodop雲打印實現手機打印 JS語句打印、
普通網頁是針對電腦進行設計的,用手機的瀏覽器瀏覽的時候,經常還需要放大等操作,手機一般是點兩下,或者兩個手指向外滑動放大網頁。
個人測試了下讓網頁里的元素本身變大,在手機瀏覽時會好一些。
做了個很簡單的頁面測試,頁面本身是一個按鈕一個文本框,打印的內容是一個圖片加一個文本,模擬用手機打印一個名片,變大的方法就是加大字體,加大寬高,中間遇到要用textarea文本框,這個文本框中的文本,也可以直接通過加字體大小樣式,改變輸入的文字大小,改變字體大小后,對應的寬高也會改變,比如行是3,就是3個改后的較大字號的3行。
css樣式代碼:
body{margin:0px;font-size:50px;} #bodyA1{background-color:#f1f3f5;} #header{background-image:url(../images/topbg.png);width:100%;height:100px;} #head1{background-image:url(../images/lodoptest.png);width:400px;height:100px;} #footer{width:790px;height:100px;margin:auto;text-align:right;clear:both;} .btn2 {background-color:#2175bd;border:none;color:white;padding:50px 50px;text-align:center;text-decoration:none;margin-left:5px;margin-top:60px;font-size:50px} #textareadiv{float:left;width:500px;font-size:100px;margin-left:30px;margin-top:50px;} #btn2div{float:left} #S1{font-size:50px;}
頁面代碼:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB打印控件LODOP</title> <!--<script language="javascript" src="LodopFuncs.js"></script>--> <script src='http://192.168.1.14:8000/CLodopfuncs.js'></script> <link href="css/phone1and.css" type='text/css' rel="stylesheet"> </head> <body id="bodyA1"> <div id="header"> <div id="head1"></div> </div> <div id="textareadiv"> <textarea rows="3" id="S1" cols="15"></textarea><br> </div> <div id="btn2div"> <input type="button" class="btn2" value="點擊預覽" onclick="card()"> </div> <div id="footer"><img src="./images/lodopfoot.png"></div> <script language="javascript" type="text/javascript"> function card(){ LODOP.PRINT_INIT(""); LODOP.SET_PRINT_PAGESIZE(1,"20cm","10cm",""); LODOP.ADD_PRINT_IMAGE(0,0,"100%","100%","<img src='images/tu1.png'>"); LODOP.ADD_PRINT_TEXT(124,167,285,78,document.getElementById("S1").value); LODOP.SET_PRINT_STYLEA(0,"FontSize",31); LODOP.PREVIEW(); }; </script> </body>
圖示:
該頁面的瀏覽器預覽和手機的瀏覽器預覽頁面
c-lodop的本地預覽窗口,手機上c-lodop的遠程預覽窗口
該打印的內容比較簡單,一個圖片和一個文本項。頁面是一個文本框和一個按鈕,模擬打印一個名片,實際的名片內容很多,弄復雜的名片太花時間,這里只是做測試,所以簡略。
如圖可以看出,遠程預覽窗口和本地預覽窗口是不同的,c-lodop可以支持遠程預覽。
測試途中遇到點小問題,這個網站是自己電腦當作服務器,發布到內網自己訪問測試的,途中用手機點打印預覽的打印總是彈出一個放大的部分。訪問c-lodop自己的歡迎頁面的預覽,點預覽的打印也是這個效果,可能和手機有關,之后用其他手機瀏覽器測試,也是這樣。
再之后我用直接打印測試了下,直接打印是正常的,手機點直接打印按鈕,電腦上彈出虛擬打印機的保存框(模擬的是集中打印模式,用的虛擬打印機)。
比較奇怪,刷新幾次,點了幾次之后又正常了,點打印預覽可以彈出選擇打印機等的彈窗。
這個問題可能和自己的手機有關,手機上可能有什么點擊放大的功能之類的被啟動了,后來又好了。