整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          集成Lodop打印控件實現(xiàn)打印教程

          、前言

          關(guān)于打印這一塊我前后做了很多的嘗試:Java條形碼標(biāo)簽生成并打印示例、再記js前端打印指定內(nèi)容、JsBarcode打印demo。其中涉及到后端、前端的兩種實現(xiàn),目前我這邊項目中實現(xiàn)的是前端打印Html的方式實現(xiàn)的。

          但是慢慢地就會發(fā)現(xiàn),在前端及打印機的適配上配置比較復(fù)雜,每增加一臺設(shè)備就要進行一次配置、修改后牽動過大,每一個參數(shù)

          每次調(diào)整都會影響到全局元素,一個1毫米的誤差在連續(xù)打印100張或更多時就會被無限放大...

          二、Lodop

          2.1、尋求更優(yōu)解決方案

          痛則思變,尋求一種能實現(xiàn)我們需求且兼容性更好地解決方式勢在必行!在同事的介紹下,接觸到了Lodop這個打印插件。Lodop(標(biāo)音:勞道譜,俗稱:露肚皮)是專業(yè)WEB控件,用它既可裁剪輸出頁面內(nèi)容,又可用程序代碼直接實現(xiàn)復(fù)雜打印。控件功能強大,卻簡單易用。

          2.2、簡單介紹

          這是一款打印插件,目前支持IE系列、IE內(nèi)核系列(QQ、搜狗、UC、360等外殼)瀏覽器,以及Chrome(谷歌)系列、Firefox(火狐)系列、Opera系列、 Safari系列等各種瀏覽器的幾乎所有版本。在安裝了打印程序后,可以通過包含但不限于HTML、JS代碼、文檔等方式實現(xiàn)打印功能。各位可以根據(jù)自己的需求采用更為適合的方案。下面貼一下Lodop簡單的支持說明:


          三、接入及使用教程

          3.1、安裝打印控件及web服務(wù)

          進入到頁面:http://www.lodop.net/demolist/PrintSample1.html ,點擊查看本機是否安裝,第一次會有一個exe執(zhí)行文件,下載后點擊安裝即可。


          3.2、代碼部分

          這里直接貼出來相關(guān)代碼吧,

          
           <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="UTF-8">
                  <title></title>
          		<script src="LodopFuncs.js"></script>
          		<script src="CLodopfuncs.js"></script>		
          		<object  id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> 
          			   <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
          		</object>
              </head>
              <body>
                  <a href="javascript:prn_Preview()"><b>打印預(yù)覽</b></a>
              </body>
          	
          	<script type="text/javascript">
          		var LODOP; //聲明為全局變量  
          		function prn_Preview() {
          			LODOP=getLodop();  
          			for(let i=1;i<5;i++){
          				LODOP.PRINT_INITA(0,0,800,1600,"BH");
          				LODOP.SET_PRINT_PAGESIZE(1,100.50,"A4");
          				
          				LODOP.ADD_PRINT_TEXT(20,10,500,25,"嘜頭:TA123455");
          				LODOP.SET_PRINT_STYLEA(1,"FontName","Swis721 BlkCn BT");
          				LODOP.SET_PRINT_STYLEA(1,"FontSize",18);
          				
          				LODOP.SET_PRINT_STYLE("FontSize",18)
          				LODOP.ADD_PRINT_TEXT(20,330,500,25,"1件");			
          				
          				LODOP.SET_PRINT_STYLE("FontSize",13)
          				LODOP.ADD_PRINT_TEXT(53,10,500,20,"品名:中國東莞廣東    2021-08-20 14:27:52");
          				
          				LODOP.SET_PRINT_STYLE("FontSize",13)
          				LODOP.ADD_PRINT_TEXT(80,10,500,20,"參數(shù):TA1,31KG,999CBM    業(yè)務(wù)員:黃X玲");
          				LODOP.ADD_PRINT_BARCODE(120,20,350,64,"128C","1234567890");
          				LODOP.SET_PRINT_STYLEA(0,"GroundColor","#0080FF");
          				
          				LODOP.PRINT();
          			}			
          		};		
              </script>
          	
          </html>
           


          四、后記

          部分js,可以在Lodop官網(wǎng),通過F12中的Network中獲取,另外,文字樣式的調(diào)整可以根據(jù)文字大小和字體樣式進行配置。

          PS:關(guān)于前端的部分,可能后面更多以使用為主,暫不會做過多深入的剖析,雖如此,仍歡迎一起探討交流!

          更多精彩,請持續(xù)關(guān)注:guangmuhua.com

          • TML是標(biāo)簽語言,瀏覽器識別網(wǎng)絡(luò)傳遞的最基本的信息就是HTML標(biāo)簽和標(biāo)簽包含的內(nèi)容,所有網(wǎng)頁信息都是這種類型的,開發(fā)者用標(biāo)簽來標(biāo)記信息內(nèi)容傳給瀏覽器,瀏覽器識別并解釋標(biāo)簽要求的種顏色、樣式來展示內(nèi)容,這種內(nèi)容一般叫超文本或富文本

          無代碼元件的TAG屬性就是為了定義是什么樣的HTML標(biāo)簽

          默認(rèn)的標(biāo)簽可以在需要時修改,上圖中就是開發(fā)區(qū)選中一個Pane元件,下部屬性中顯示其為div標(biāo)簽對象,所以我們一般其稱為顯示塊元件
          

          以上示例是一個表格元件,默認(rèn)的表格中行元件標(biāo)簽是tr
          WWW規(guī)范中,表格行元件tr中必須是td元件,不能是div或其他,所以如果我們需要放一個顯示塊元件時,需改顯示塊元件的TAG為td
          同理,可以查看表格中默認(rèn)放的日期、數(shù)字TAG都是td
          

          用第三方工具合成自定義的HTML內(nèi)容

          上例是用百度UEditor在線進行一個表格富文本生成的演示
          注意生成的HTML富文本正常是有換行處理,但在輸入到HTML Display富文本(也叫超文本)顯示元件中時,需刪除換行符號
           · 刪除方式為,將富文本放入一個文本編輯查看工具中,如Notepad++
           · 用查找替換方式,查到\r\n,替換為空格,將超文本轉(zhuǎn)為一行字符串
          HTML富文本可以用Create From Template模板生成字符串元件來動態(tài)生成可變內(nèi)容
           · 如果動態(tài)生成富文本,需將固定寫入的a b ... 改為變量${a} ${b} ... 然后作為模板進行處理
          自定義的HTML富文本在開發(fā)中,會常用到,作為高級技能的一部分,建議按以上方式掌握
           · 可以用以生成打印內(nèi)容,Lodop打印的HTML內(nèi)容可以用HTML富文本傳入,參考“第三方插件接入”中“Lodop專業(yè)打印”一節(jié)內(nèi)容
           · 第三方圖表中的代碼,也是由富文本生成并處理的,參考“第三方插件接入”中“Echarts數(shù)據(jù)可視化”一節(jié)內(nèi)容
          
          • 建議在線使用Ueditor等專業(yè)工具處理富文本
          • · 請參考:https://ueditor.baidu.com/website/onlinedemo.html

          用無代碼HTML富文本顯示元件展示要顯示的內(nèi)容

          拖放一個HTML富文本顯示元件
          拖入一個字符串常量元件,F(xiàn)2打開后,字符串常量值輸入我們用第三方或自寫的的富文本
          

          *****

          本文為TERSUS無代碼開發(fā)手冊文章,供參考學(xué)習(xí)使用,在有需要詳細(xì)了解對應(yīng)內(nèi)容時細(xì)看學(xué)習(xí),敬請關(guān)注并轉(zhuǎn)發(fā)文章

          參考我們手冊第一個文章中的2分鐘的計算器功能的拖放連線開發(fā)演示,可學(xué)會無代碼開發(fā)是如何開發(fā)軟件的

          想學(xué)無代碼軟件開發(fā)的學(xué)員請先學(xué)習(xí)3小時免費教學(xué)視頻,3小時內(nèi)可學(xué)會開發(fā)并開發(fā)出一套管理軟件系統(tǒng),然后看手冊及其他視頻來進階提高快速成為高級開發(fā)人員

          前有web項目要用到打印機功能,來打印小票;

          我在網(wǎng)上搜了下就是簡單的js代碼來實現(xiàn)打印機;

          但我的業(yè)務(wù)不能在頁面再來設(shè)計打印的功能的配置;

          所以我找了個第三方的瀏覽器控件——Lodop

          我就是使用的Lodop

          首先來配置環(huán)境

          先來下載Lodop的環(huán)境

          Lodop綜合版(Lodop6.226+CLodop3.083)

          在下載的壓縮文件解壓縮后的CLodop_Setup_for_Win32NT.exe安裝,就可以使用了。

          使用

          在html導(dǎo)入,在head或body中加入

          <script language="javascript" src="LodopFuncs.js"></script>
          

          使用的話

          var LODOP=getLodop();//直接這樣就得到了打印控件對象
          

          常用的方法

          PRINT_INIT(strPrintTaskName)//打印初始化
          SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)//設(shè)定紙張大小
          ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)//增加超文本項
          ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)//增加純文本項
          ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)//增加表格項
          ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)//畫圖形
          SET_PRINT_STYLE(strStyleName, varStyleValue)//設(shè)置對象風(fēng)格
          PREVIEW()//打印預(yù)覽
          PRINT()//直接打印
          PRINT_SETUP()//打印維護
          PRINT_DESIGN()//打印設(shè)計
          

          這里使用它的官方的樣例

          <script language="javascript" type="text/javascript"> 
           var LODOP; //聲明為全局變量 
          	function myPrint() {		 
          		CreatePrintPage(); 
          		LODOP.PRINT();		 
          	}; 
          	function CreatePrintPage() { 
          		LODOP=getLodop(); 
          		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片"); 
          		LODOP.ADD_PRINT_RECT(10,55,360,220,0,1); 
          		LODOP.SET_PRINT_STYLE("FontSize",11); 
          		LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德強"); 
          		LODOP.SET_PRINT_STYLEA(2,"FontName","隸書"); 
          		LODOP.SET_PRINT_STYLEA(2,"FontSize",15);		 
          		LODOP.ADD_PRINT_TEXT(53,187,75,20,"科學(xué)家"); 
          		LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址:中國北京社會科學(xué)院附近東大街西胡同"); 
          		LODOP.ADD_PRINT_TEXT(138,132,166,20,"電話:010-88811888");	 
          	}; 
          </script> 
          

          預(yù)覽效果:

          打印預(yù)覽

          上面的方法其實還是有點抽象的

          Lodop也提供了直接打印html的方法

          //直接將idName的內(nèi)容打印出來
          var strHtml = document.getElementById("idName").innerHTML
          LODOP.ADD_PRINT_HTM(10,55,"100%","100%",strHtml);
          

          我是用的這個來打印小票;

          我寫的小票的樣式

          更多詳細(xì)內(nèi)容,請看官方文檔

          http://www.lodop.net/LodopDemo.html


          主站蜘蛛池模板: 亚洲AV午夜福利精品一区二区| 国产怡春院无码一区二区| 亚洲电影唐人社一区二区| 四虎永久在线精品免费一区二区 | 韩国精品一区视频在线播放| 清纯唯美经典一区二区| 国产乱码精品一区三上| 国产成人一区二区三中文| 久久亚洲综合色一区二区三区| 一区二区三区高清视频在线观看| 亚洲愉拍一区二区三区| 国产成人亚洲综合一区| 国产精品福利一区二区| 日本激情一区二区三区| 精品无码AV一区二区三区不卡| 另类免费视频一区二区在线观看| 久久久久女教师免费一区| 国产福利电影一区二区三区| 无码8090精品久久一区| 香蕉久久AⅤ一区二区三区| 国产丝袜无码一区二区视频| 日本高清天码一区在线播放| 成人精品视频一区二区| 国产精品亚洲专区一区| 精品中文字幕一区在线| V一区无码内射国产| 国产熟女一区二区三区四区五区| 精品福利一区二区三区| 国产婷婷色一区二区三区| 国产亚洲无线码一区二区| 无码少妇一区二区三区| 亚洲一区精品视频在线| 亚洲日韩精品国产一区二区三区| 色欲AV蜜桃一区二区三| 国产一区二区三区日韩精品| 精品国产一区二区22| 久久久国产精品一区二区18禁| 亚洲高清日韩精品第一区| 久久精品免费一区二区喷潮| 国产一区二区三区电影| 国产日韩一区二区三区在线观看|