集成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

在線咨詢

上一篇：鏤空廣告，一行CSS實現(xiàn)滾動時藏在信息流后面的廣告效果
下一篇：陳英、錢伯彥：職業(yè)教育，德國的經(jīng)驗是及早分流

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商