Complete HTML, controller, and Angular instructions can also be used, but some parts require writing native js code, but it is found that the native js cannot be used
html:
<a type="button" onclick="printOrder()">直接打印</a>
js in:
var LODOP; //聲明為全局變量
function printPreview(){
//創(chuàng)建小票打印頁
CreatePrintPage();
//打印預覽
LODOP.PREVIEW();
};
/**
* 樣例函數(shù),服務器確認訂單后執(zhí)行
*/
function printOrder() {
//創(chuàng)建小票打印頁
CreatePrintPage();
//開始打印
LODOP.PRINT();
};
function CreatePrintPage(json) {
//json 創(chuàng)建模擬服務器響應的訂單信息對象
var json = {"title":"XXXXX訂單信息", "name":"張三", "phone": "138123456789", "orderTime": "2012-10-11 15:30:15",
"orderNo": "20122157481315", "shop":"XX連鎖", "total":25.10,"totalCount":6,
"goodsList":[
{"name":"菜心(無公害食品)", "price":5.00, "count":2, "total":10.08},
{"name":"菜心(無公害食品)", "price":5.00, "count":2, "total":10.02},
{"name":"旺菜", "price":4.50, "count":1, "total":4.50},
{"name":"黃心番薯(有機食品)", "price":4.50, "count":1, "total":4.50}
]
}
var hPos=10,//小票上邊距
pageWidth=580,//小票寬度
rowHeight=15,//小票行距
//獲取控件對象
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
//初始化
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片");
//添加小票標題文本
LODOP.ADD_PRINT_TEXT(hPos,30,pageWidth,rowHeight,json.title);
//上邊距往下移
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"姓名:");
LODOP.ADD_PRINT_TEXT(hPos,30,pageWidth,rowHeight,json.name);
//hPos+=rowHeight; //電話不換行
LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,"電話:");
LODOP.ADD_PRINT_TEXT(hPos,100,pageWidth,rowHeight,json.phone);
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"下單時間:");
LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.orderTime);
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"訂單編號:");
LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.orderNo);
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"取貨門店:");
LODOP.ADD_PRINT_TEXT(hPos,60,pageWidth,rowHeight,json.shop);
hPos+=rowHeight;
LODOP.ADD_PRINT_LINE(hPos,2, hPos, pageWidth,2, 1);
hPos+=5;
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,"商品名稱");
LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,"單價");
LODOP.ADD_PRINT_TEXT(hPos,110,pageWidth,rowHeight,"數(shù)量");
LODOP.ADD_PRINT_TEXT(hPos,140,pageWidth,rowHeight,"小計");
hPos+=rowHeight;
//遍歷json的商品數(shù)組
for(var i=0;i<json.goodsList.length;i++){
if(json.goodsList[i].name.length<4){
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,json.goodsList[i].name);
}else {
//商品名字過長,其他字段需要換行
LODOP.ADD_PRINT_TEXT(hPos,1,pageWidth,rowHeight,json.goodsList[i].name);
hPos+=rowHeight;
}
LODOP.ADD_PRINT_TEXT(hPos,70,pageWidth,rowHeight,json.goodsList[i].price);
LODOP.ADD_PRINT_TEXT(hPos,115,pageWidth,rowHeight,json.goodsList[i].count);
LODOP.ADD_PRINT_TEXT(hPos,140,pageWidth,rowHeight,json.goodsList[i].total);
hPos+=rowHeight;
}
//商品遍歷打印完畢,空一行
hPos+=rowHeight;
//合計
LODOP.ADD_PRINT_TEXT(hPos,80,pageWidth,rowHeight,"合計:"+json.totalCount);
LODOP.ADD_PRINT_TEXT(hPos,130,pageWidth,rowHeight,"¥"+json.total);
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,2,pageWidth,rowHeight,(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString())
hPos+=rowHeight;
LODOP.ADD_PRINT_TEXT(hPos,25,pageWidth,rowHeight,"謝謝惠顧,歡迎下次光臨!");
//初始化打印頁的規(guī)格
LODOP.SET_PRINT_PAGESIZE(3,pageWidth,45,"XXXXX訂單信息");
};
But error:
I tried a very simple code, but onclick doesn’t work, why?
Since you use angular, there should be several controllers. You should declare the corresponding event callback method in the controller where the link that needs to be clicked is located, and the corresponding event callback should be bound through the ng-click instruction
You can define the function as window.fun=function(){} and then call window.fun in ng. Because angular does not directly operate DOM,,
angular can be used by the whole family. If you don’t want to use angular’s ??data binding, there is no need to use a framework