關(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張或更多時就會被無限放大...
痛則思變,尋求一種能實現(xiàn)我們需求且兼容性更好地解決方式勢在必行!在同事的介紹下,接觸到了Lodop這個打印插件。Lodop(標(biāo)音:勞道譜,俗稱:露肚皮)是專業(yè)WEB控件,用它既可裁剪輸出頁面內(nèi)容,又可用程序代碼直接實現(xiàn)復(fù)雜打印。控件功能強大,卻簡單易用。
這是一款打印插件,目前支持IE系列、IE內(nèi)核系列(QQ、搜狗、UC、360等外殼)瀏覽器,以及Chrome(谷歌)系列、Firefox(火狐)系列、Opera系列、 Safari系列等各種瀏覽器的幾乎所有版本。在安裝了打印程序后,可以通過包含但不限于HTML、JS代碼、文檔等方式實現(xiàn)打印功能。各位可以根據(jù)自己的需求采用更為適合的方案。下面貼一下Lodop簡單的支持說明:
進入到頁面:http://www.lodop.net/demolist/PrintSample1.html ,點擊查看本機是否安裝,第一次會有一個exe執(zhí)行文件,下載后點擊安裝即可。
這里直接貼出來相關(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
默認(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
上例是用百度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)容
拖放一個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
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。