lodop-web打印控件
lodop-web打印控件
一、概述
Lodop是一款专业的WEB打印控件 ，其设计目标是简单易用、功能足够强大，开创WEB打印开发的新局面。
Lodop设计者对 WEB 下的打印开发任务进行了分类汇总，高度抽象，设计出仅用几个功能函数，就可实现复杂的打印任务，尽量减少使用者的知识累赘。 控件发布包有3个系统文件 组成，全部功能用几个控件参数 和2组功能函数 来实现。
尽管我们有个理想化的目标，那就是您不用详细了解这些参数或函数，仅仅看懂几个样例文件就能很轻松地开始使用本控件，为此Lodop提供了一个足够完善的设计界面，用它可以实现大多数打印开发任务，但事实上了解这些参数和函数总还是有好处的，特别是当您的开发任务很复杂时，这就是本文目的，但愿本文档足够详细且简单明了。
如果此前曾看过lodop的入门样例程序，本文会更容易理解！
二、系统文件
Lodop发布包内主要有如下几个文件：
install_lodop.exe
该文件是控件安装和升级的主文件，提供给用户或开发者下载安装，如果不特意拦截一般都能100%安装，对“网页插件安装难”有一定改善。如果将其复制或改名为uninstall_lodop.exe (名前加un)就可用其卸载控件。
Lodop安装后，在操作系统目录WINDOWS\system32下会安装两个实体文件：CAOSOFT_WEB_PRINT_LODOP.OCX 和NPCAO SOFT_WEB_PRINT_lodop.dll ，前一个文件是OCX文件，后者是Npplugin文件，其作用是实现多浏览器支持。目前Lodop 支持 IE系列、 IE 内核系列 (遨游、 360 、世界之窗、腾讯 TT 、搜狗等 ) 浏览器，以及 Firefox (火狐 ) 系列、 Chrome (谷歌 ) 系列、 Opera 系列、Safari 系列等Windows下几乎所有的 浏览器。
程序文件有几个预定参数：
- wait XX 该参数设置安装程序运行完毕后自动关闭窗口，这里的XX 表示关闭前等待的秒数，如果是0 秒则安装（或卸载）成功后立即关闭，例如： – wait8
-nowindow 该参数设置安装程序运行时不出现窗口。
-un 该参数使程序执行卸载操作，参数优先于文件名。
-in 该参数使程序执行安装操作，参数优先于文件名。
LodopFuncs.js
该文件是用来引导安装控件的一个JS文件，是个样例，但建议直接采用。其中getLodop的任务是判断浏览器的类型并决定采用哪个对象实例，并检测控件是否安装、是否最新版本、并引导安装或升级。文件内容如下：
function getLodop(oOBJECT,oEMBED){
var strHtml1="打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
var strHtml2="打印控件需要升级!点击这里执行升级,升级后请重新进入。";
var strHtml3="(注：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】中先卸载它)";
var LODOP=oEMBED;
try{
if (navigator.appVersion.indexOf("MSIE")>=0) LODOP=oOBJECT;
if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
if (navigator.userAgent.indexOf('Firefox')>=0)
document.documentElement.innerHTML=strHtml3+document.documentElement.innerHTML;
if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtml1); else
document.documentElement.innerHTML=strHtml1+document.documentElement.innerHTML;
} else if (LODOP.VERSION<"6.0.0.1") {
if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtml2); else
document.documentElement.innerHTML=strHtml2+document.documentElement.innerHTML;
}
//*****如下空白位置适合调用统一功能:*********
//*******************************************
return LODOP;
}catch(err){
document.documentElement.innerHTML="Error:"+strHtml1+document.documentElement.innerHTML;
return LODOP;
}
}
其中的关键点是VERSION函数，Lodop提供了这个“读版本号”功能，这样控件的安装和升级任务就交给JS来实现，以下是控件在页面内的调用代码，其中包含getLodop的使用：
var LODOP=getLodop(document.getElementById('LODOP'),document.getElementById('LODOP_EM'));
…
以上两段代码相互配合实现了Lodop的安装、调用和升级。之所以将LodopFuncs.js作为一个资源文件来部署，既可以利用浏览器的缓存减少页面内容的重复下载，同时还实现了控件发布统一管理，整个应用系统中只要这一个地方发布Lodop。其它页面直接拷贝嵌入第2段代码就可以了。
三、控件参数
Lodop有如下控件参数,以页面object对象元素的参数形式使用：
Caption
名称：设置控件的显示标题
格式：aption " value=" 我是打印控件lodop ">
功能： 控件在页面内一般是以object元素形式被引用。可以通过设置元素的width和height等于0来隐藏控件，不隐藏时可以为控件设置一个标题，以便于看到控件是否被正确安装，以及控件对象在页面内的位置。希望打印预览界面或设计界面内嵌到网页内时，本参数很有用。
Color
名称：设置控件的显示区域颜色
格式：
功能：通过该参数设置控件显示区域的底色，对于希望打印预览界面或设计界面内嵌到网页内时，本参数可以让控件容易融于整体页面。
参数值采用超文本颜色形式，可以是三色16进制值组合，也可以是英文颜色名。
Border
名称：设置控件的显示区域边界
格式：Border " value=" 1 ">
功能：通过该参数设置控件显示区域的边界，值等于1表示有边界，否则无边界。本参数可以让控件更融于整体页面。
四、打印实例
一般打印
function print(data,orderData){ //打印
在页面内嵌入打印控件
< script language ="javascript" src ="LodopFuncs.js">script >
< object id ="LODOP" classid ="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width =0 height =0>
< embed id ="LODOP_EM" type ="application/x-print-lodop" width =0 height =0 pluginspage ="install_lodop.exe">embed >
object >
缩放打印图片
function myPreview2() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_IMAGE(30,150,600,400," border='0' src='http://www.baidu.com/img/baidu_logo.gif'/>" );
LODOP.SET_PRINT_STYLEA(1,"Stretch" ,1);//( 可变形 ) 扩展缩放模式
LODOP.PREVIEW();
};
function myPreview3() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_IMAGE(30,150,600,80," );
LODOP.SET_PRINT_STYLEA(1,"Stretch" ,2);// 按原图比例 ( 不变形 ) 缩放模式
LODOP.PREVIEW();
};
控制表格的打印样式
function myPreview3(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
var strBodyStyle="" ;
var strFormHtml=strBodyStyle+"" +document.getElementById("form1" ).innerHTML+"" ;
LODOP.ADD_PRINT_TEXT(50,50,260,39," 细线样式打印： " );
LODOP.ADD_PRINT_HTM(88,50,300,200,strFormHtml);
LODOP.PREVIEW();
};
打印内容旋转
function CreateOneFormPage(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.SET_PRINT_STYLE("FontName" ," 黑体 " );
LODOP.SET_PRINT_STYLE("FontSize" ,15);
LODOP.ADD_PRINT_TEXT(71,162,120,35," 正常内容 " );
LODOP.ADD_PRINT_TEXT(232,355,325,34," 纯文本逆时针旋转 90 度 \n" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_TEXT(181,161,346,34," 纯文本逆时针旋转 45 度 \n" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,45);
LODOP.ADD_PRINT_HTM(230,98,163,200,"\n旋转 90 度 \n 正常
超文本
内容 \n\n" );
};
用代码设计复杂的文本打印
function CreateFullBill() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.SET_PRINT_STYLE("FontColor" ,"#0000FF" );
LODOP.ADD_PRINT_SHAPE(2,116,43,655,373,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(1,144,44,653,1,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(1,172,44,653,1,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,116,143,1,56,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,116,488,1,56,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,116,574,1,372,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,172,166,1,282,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,172,415,1,282,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(1,454,44,653,1,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,454,130,1,34,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,454,483,1,34,0,1,"#800000" );
LODOP.ADD_PRINT_SHAPE(0,64,62,120,1,0,1,"#0000FF" );
LODOP.ADD_PRINT_SHAPE(3,29,62,32,32,0,4,"#0000FF" );
LODOP.ADD_PRINT_SHAPE(3,21,300,147,75,0,3,"#FF0000" );
LODOP.ADD_PRINT_SHAPE(3,26,307,132,65,0,1,"#FF0000" );
LODOP.ADD_PRINT_TEXT(33,192,408,30," 中国移动通信集团北京有限公司专用发票 " );
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,15);
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(68,326,100,25," 发 票 联 " );
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,11);
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(29,98,84,35," 中国移动通信 CHINA MOBILE" );
LODOP.ADD_PRINT_SHAPE(2,37,69,18,15,0,1,"#0000FF" );
LODOP.ADD_PRINT_SHAPE(2,40,73,10,9,0,1,"#0000FF" );
LODOP.ADD_PRINT_TEXT(70,64,117,20," 移 动 信 息 专 家 " );
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,8);
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(124,58,68,20," 客户名称 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(152,58,68,20," 手机号码 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(124,497,68,20," 受理类别 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(152,497,68,20," 合 同 号 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(465,54,68,20," 大写金额 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(465,495,104,20," 小写金额 ￥ : " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(98,56,47,20," 编号： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(98,259,48,20," 日期： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(97,500,71,20," 发票号码： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(496,54,83,20," 话费帐期： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(496,321,83,20," 营业员工号： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(496,480,93,20," 收款单位名称： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(226,703,27,121," 第二联发票联 " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(203,21,17,195," 京地税准印八九号五百万份 " );
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,8);
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXT(126,150,100,20," 郭德强 " );
LODOP.ADD_PRINT_TEXT(151,150,100,20,"13954885188" );
LODOP.ADD_PRINT_TEXT(125,584,99,20," 发票打印 ( 第 1 次 )" );
LODOP.ADD_PRINT_TEXT(465,140,198,20," 陆百柒拾捌元叁角零分 " );
LODOP.ADD_PRINT_TEXT(465,599,70,20,"678.30" );
LODOP.ADD_PRINT_TEXT(496,408,59,20,"H112063" );
LODOP.ADD_PRINT_TEXT(191,58,100,20," 国内漫游通话 " );
LODOP.ADD_PRINT_TEXT(191,217,100,20,"584.00" );
LODOP.ADD_PRINT_TEXT(222,58,100,20," 增值业务费 " );
LODOP.ADD_PRINT_TEXT(222,217,100,20,"48.30" );
LODOP.ADD_PRINT_TEXT(251,58,100,20," 代收费 " );
LODOP.ADD_PRINT_TEXT(251,217,100,20,"50.00" );
LODOP.ADD_PRINT_TEXT(280,58,100,20," 优惠费 " );
LODOP.ADD_PRINT_TEXT(280,217,100,20,"4.00" );
LODOP.ADD_PRINT_TEXT(98,101,150,20,"101081005747319387" );
LODOP.ADD_PRINT_TEXT(97,307,150,20,"2008 年 10 月 19 日 10:28:38" );
LODOP.ADD_PRINT_TEXT(152,584,103,20,"138860016786" );
LODOP.ADD_PRINT_TEXT(95,571,112,20,"06775516" );
LODOP.SET_PRINT_STYLEA(0,"FontName" ,"System" );
LODOP.ADD_PRINT_TEXT(76,500,71,20," 发票代码： " );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#800000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXT(74,571,112,20,"237090742401" );
LODOP.SET_PRINT_STYLEA(0,"FontName" ,"System" );
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#FF0000" );
LODOP.ADD_PRINT_TEXT(496,135,183,20,"2008 年 09 月 (20080901-20080930)" );
LODOP.ADD_PRINT_TEXT(496,572,112,20,"- 王府井中心店营 " );
LODOP.ADD_PRINT_TEXT(311,217,100,20,"678.30" );
LODOP.ADD_PRINT_TEXT(311,58,100,20," 费用合计 " );
};
满页打印和打印页头页尾
function PreviewMytable(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_TABLE(100,5,500,280,document.getElementById("div1" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"TableHeightScope" ,iRadioValue);
LODOP.PREVIEW();
};
function PrintInFullPage(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.PRINT_INIT(" 打印控件功能演示 _Lodop 功能 _ 自定义纸张 " );
LODOP.SET_PRINT_PAGESIZE(2,0,0,"A4" );
LODOP.ADD_PRINT_TABLE("2%" ,"1%" ,"96%" ,"98%" ,document.getElementById("div1" ).innerHTML);
LODOP.SET_PREVIEW_WINDOW(0,0,0,800,600,"" );
LODOP.PREVIEW();
};
演示使用百分比(%) 和满页打印：
var LODOP; // 声明为全局变量
function myCreatePage() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_ELLIPSE("0%" ,"0%" ,"100%" ,"50%" ,0,1);
LODOP.ADD_PRINT_TABLE("50%" ,"0%" ,"100%" ,"50%" ," leftmargin=0>" +document.getElementById("table02" ).innerHTML+"
");
};
function myPreview() {
myCreatePage();
LODOP.PREVIEW();
};
幅面高度不固定的票据打印
function ReSumMoney() {
var fSumvalue=0;
for (i = 1; i < 8; i++) {
if (document.getElementById("CK" +i).checked) {
fSumvalue=fSumvalue+parseFloat(document.getElementById("DJ" +i).value);
}
}
document.getElementById("HJ" ).value=fSumvalue.toFixed(2);
};
function MyPreview() {
AddTitle();
var iCurLine=80;// 标题行之后的数据从位置 80px 开始打印
for (i = 1; i < 8; i++) {
if (document.getElementById("CK" +i).checked) {
LODOP.ADD_PRINT_TEXT(iCurLine,15,100,20,document.getElementById("BH" +i).value);
LODOP.ADD_PRINT_TEXT(iCurLine,149,100,20,document.getElementById("MC" +i).value);
LODOP.ADD_PRINT_TEXT(iCurLine,289,100,20,document.getElementById("SL" +i).value);
LODOP.ADD_PRINT_TEXT(iCurLine,409,100,20,document.getElementById("DJ" +i).value);
iCurLine=iCurLine+25;// 每行占 25px
}
}
LODOP.ADD_PRINT_LINE(iCurLine,14,iCurLine,510,0,1);
LODOP.ADD_PRINT_TEXT(iCurLine+5,20,300,20," 打印时间： " +(new Date()).toLocaleDateString()+" " +(new Date()).toLocaleTimeString());
LODOP.ADD_PRINT_TEXT(iCurLine+5,346,150,20," 合计金额： " +document.getElementById("HJ" ).value);
LODOP.SET_PRINT_PAGESIZE(3,1385,45,"" );// 这里 3 表示纵向打印且纸高 “ 按内容的高度 ” ； 1385 表示纸宽 138.5mm ； 45 表示页底空白 4.5mm
LODOP.PREVIEW();
};
function AddTitle(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_TEXT(15,102,355,30," 北京市东城区沃乐福商城收款票据 " );
LODOP.SET_PRINT_STYLEA(1,"FontSize" ,13);
LODOP.SET_PRINT_STYLEA(1,"Bold" ,1);
LODOP.ADD_PRINT_TEXT(50,15,100,20," 商品编号 " );
LODOP.SET_PRINT_STYLEA(2,"FontSize" ,10);
LODOP.SET_PRINT_STYLEA(2,"Bold" ,1);
LODOP.ADD_PRINT_TEXT(50,149,100,20," 商品名称 " );
LODOP.SET_PRINT_STYLEA(3,"FontSize" ,10);
LODOP.SET_PRINT_STYLEA(3,"Bold" ,1);
LODOP.ADD_PRINT_TEXT(50,289,100,20," 商品数量 " );
LODOP.SET_PRINT_STYLEA(4,"FontSize" ,10);
LODOP.SET_PRINT_STYLEA(4,"Bold" ,1);
LODOP.ADD_PRINT_TEXT(50,409,100,20," 单价 ( 元 )" );
LODOP.SET_PRINT_STYLEA(5,"FontSize" ,10);
LODOP.SET_PRINT_STYLEA(5,"Bold" ,1);
LODOP.ADD_PRINT_LINE(72,14,73,510,0,1);
};
在页面嵌入背景图片
function myShow4() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_TEXT(43,250,75,20," 东北地区 " );
LODOP.ADD_PRINT_TEXT(96,173,75,20," 华北地区 " );
LODOP.ADD_PRINT_TEXT(187,208,60,20," 华南地区 " );
LODOP.ADD_PRINT_TEXT(137,256,60,20," 华东地区 " );
LODOP.ADD_PRINT_TEXT(136,176,61,20," 华中地区 " );
LODOP.ADD_PRINT_TEXT(77,76,60,20," 西北地区 " );
LODOP.ADD_PRINT_TEXT(172,129,60,20," 西南地区 " );
LODOP.ADD_PRINT_LINE(97,224,57,284,0,1);
LODOP.ADD_PRINT_LINE(89,118,107,177,0,1);
LODOP.ADD_PRINT_LINE(169,152,152,213,0,1);
LODOP.ADD_PRINT_LINE(117,195,134,201,0,1);
LODOP.ADD_PRINT_LINE(163,231,190,239,0,1);
LODOP.ADD_PRINT_LINE(147,234,148,253,0,1);
LODOP.ADD_PRINT_TEXT(94,395,24,97," 地区方位图 " );
LODOP.ADD_PRINT_SETUP_BKIMG("" );
LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW" ,1); // 注： "BKIMG_IN_PREVIEW"- 预览包含背景图 "BKIMG_IN_FIRSTPAGE"- 仅首页包含背景图
LODOP.PREVIEW();
};
强制分页
function MyPreview() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.SET_PRINT_PAGESIZE(1,500,508,"" );
for (i = 1; i < 8; i++) {
LODOP.NewPage();
LODOP.ADD_PRINT_RECT(10,18,128,160,0,1);
LODOP.ADD_PRINT_TEXT(31,33,111,20," 商品编号： " +document.getElementById("BH" +i).value);
LODOP.ADD_PRINT_TEXT(69,33,111,20," 商品名称： " +document.getElementById("MC" +i).value);
LODOP.ADD_PRINT_TEXT(107,33,111,20," 商品数量： " +document.getElementById("SL" +i).value);
LODOP.ADD_PRINT_TEXT(146,33,111,20," 商品单价： " +document.getElementById("DJ" +i).value);
LODOP.PREVIEW();
}
};
分页打印综合表格
function PreviewMytable(){
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_TABLE(128,"5%" ,"90%" ,314,document.getElementById("div2" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"Vorient" ,3);
LODOP.ADD_PRINT_HTM(20,"5%" ,"90%" ,109,document.getElementById("div1" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,1);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem" ,1);
LODOP.ADD_PRINT_HTM(444,"5%" ,"90%" ,54,document.getElementById("div3" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,1);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem" ,1);
LODOP.NewPageA();
LODOP.ADD_PRINT_TABLE(112,"5%" ,"90%" ,328,document.getElementById("div2" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"Vorient" ,3);
LODOP.ADD_PRINT_HTM(26,"5%" ,"90%" ,80,document.getElementById("div4" ).innerHTML);
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,1);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem" ,4);
LODOP.ADD_PRINT_TEXT(454,96,"76.25%" ,20," ( “ 页脚 ” ，紧跟表格 )" );
LODOP.SET_PRINT_STYLEA(0,"LinkedItem" ,4);
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,12);
LODOP.SET_PRINT_STYLEA(0,"FontColor" ,"#FF0000" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,1);
LODOP.SET_PRINT_STYLEA(0,"Horient" ,3);
LODOP.ADD_PRINT_TEXT(3,653,135,20," 总页号：第 # 页 / 共 & 页 " );
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,2);
LODOP.SET_PRINT_STYLEA(0,"Horient" ,1);
LODOP.ADD_PRINT_TEXT(3,34,196,20," 总页眉：《两个发货单的演示》 " );
LODOP.SET_PRINT_STYLEA(0,"ItemType" ,1);
LODOP.PREVIEW();
};
演示如何分页输出页面内容：
var LODOP; // 声明为全局变量
function prn1_preview() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("div1" ).innerHTML);
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("div2" ).innerHTML);
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("div3" ).innerHTML);
LODOP.PREVIEW();
};
function prn2_preview() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
strHTML="" ;
strHTML=strHTML+"";
strHTML=strHTML+document.getElementById("div1" ).innerHTML;
strHTML=strHTML+"
;
strHTML=strHTML+"";
strHTML=strHTML+document.getElementById("div2" ).innerHTML;
strHTML=strHTML+"
;
strHTML=strHTML+"";
strHTML=strHTML+document.getElementById("div3" ).innerHTML;
strHTML=strHTML+"
;
LODOP.ADD_PRINT_TABLE(88,200,350,1,strHTML);
LODOP.PREVIEW();
};
function prn3_preview() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.ADD_PRINT_HTM(88,150,450,"100%" ,document.getElementById("div1_2_3" ).innerHTML);
LODOP.PREVIEW();
};
演示内容关联后按顺序打印：
LODOP.ADD_PRINT_TABLE(100,5,500,280,document.getElementById("tablediv").innerHTML);
LODOP.ADD_PRINT_TABLE(26,0,500,280,document.getElementById("tablediv").innerHTML);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
LODOP.ADD_PRINT_TEXT(15,50,200,25,"制表日期:"+LODOP.FORMAT("TIME:YYYY年MM月DD日","DATE"));
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",2);
LODOP.ADD_PRINT_TEXT(15,300,200,25,"双表输出:Admin");
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",2);
LODOP.ADD_PRINT_TABLE(100,5,500,280,document.getElementById("tablediv").innerHTML);
LODOP.ADD_PRINT_TEXT(15,50,200,25,"制表日期:"+LODOP.FORMAT("TIME:YYYY年MM月DD日","DATE"));
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
LODOP.ADD_PRINT_TEXT(15,300,200,25,"单表制表:guest");
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
超多页打印演示：
function MyPREVIEW() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.PRINT_INIT(" 中文学位证书打印 " );
LODOP.SET_PRINT_PAGESIZE(1,2970,2100,"" );
LODOP.SET_PRINT_STYLE("FontSize" ,16);
LODOP.SET_PRINT_STYLE("Bold" ,1);
for (j = 1; j <=10; j++) {
CreateOnePage(" 姓名 " +j," 男 " ,j);
};
LODOP.SET_PREVIEW_WINDOW(0,0,0,0,0,"" );
LODOP.PREVIEW();
};
function CreateOnePage(XM,XB,BH){
LODOP.NewPage();
LODOP.ADD_PRINT_TEXTA("text01" ,67,132,137,35,XM);
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXTA("text02" ,67,280,40,35,XB);
LODOP.ADD_PRINT_TEXTA("text03" ,67,329,70,35,"1979" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXTA("text04" ,67,421,50,35,"09" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text05" ,67,489,40,35,"09" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text06" ,223,220,76,35," 理学 " );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text07" ,121,130,332,35," 应用物理与微电子技术 " );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text08" ,271,482,34,35," 校 " );
LODOP.ADD_PRINT_TEXTA("text09" ,271,616,32,35," 长 " );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,3);
LODOP.ADD_PRINT_TEXTA("text10" ,300,131,289,35," 合肥工业大学 " );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text11" ,364,210,261,35,"103700002009000" +BH);
LODOP.ADD_PRINT_TEXTA("text12" ,365,753,66,35,"2009" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
LODOP.ADD_PRINT_TEXTA("text13" ,365,843,37,35,"12" );
LODOP.ADD_PRINT_TEXTA("text14" ,365,911,54,35,"31" );
LODOP.SET_PRINT_STYLEA(0,"Alignment" ,2);
};
演示打印Table的分页小计和合计：
利用专为函数ADD_PRINT_TABLE 使用的特殊超文本元素属性可以轻松实现分页小计、累计、分类统计、页数及总合计等功能，tdata、format、tclass、tindex 四个,可以用在table内任何元素上，如果元素在tfoot 内则每页都输出。
一、设置统计类型的元素属性名是“tdata ”，其值和含义为：subCount ---本页行数，即本列的单元格行数；subSum ---本页合计，即本列的数值合计；subAverage ---本页平均数，即本页合计除以本页行数；Count ---累计行数，即从第一页到本页的行数累加值；Sum ---累计数，即从第一页到本页的本列数值的累加值；Average ---累计平均数，即累计数除以累计行数；allCount ---总行数，即全表(Table)的本列行数；allSum ---总计数，即全表(Table)的本列数值的总和；allAverage ---总平均数，即全表总计数除以总行数；format ”，format值如下样式：0 ” “0.00 ” “#.## ” “#,##0.00 ”“0.000E+00 ”“#.###E-0 ”“UpperMoney (大写金额)”等等...tclass ”，tclass值任意设置，参见本演示的“A型”“B型”个数统计。tindex ”指定对应的数据列，该值是数字型的列序号，从1起始，参见本演示的“B型”统计。# ”组成的字符串，当结果值较大时，注意占位符要足够多,除非周围有空白区
< tr >
< td width ="481" colspan ="2"> 本表截止当前行累积金额：
td >
< td width ="657" colspan ="3">< font color ="#0000FF" tdata ="Sum" format ="#,##0.00" tindex ="3" > ######font >
td >
tr >
< tr >
< td width ="374" colspan ="2"> 截止表尾累积金额
td >
< td width ="202">< font color ="#0000FF" tdata ="Sum" format ="#,##0.00" tindex ="3" > ######font >
td >
< td width ="363" colspan ="2">< font color ="#0000FF" tdata ="Sum" format ="UpperMoney" tindex ="3" > ######font >
td >
tr >
< tfoot >
< tr >
< th width ="20%" tdata ="subCount" format ="#" align ="left"> 本页行数：< font color ="#0000FF"> ######font >th >
< th width ="26%" tdata ="subSum" format ="#.##"> 本页数量小计：< font color ="#0000FF"> ######font >th >
< th width ="14%" align ="right"> 本页金额小计th >
< th width ="19%" tdata ="subSum" format ="#,##0.00" align ="right">< font color ="#0000FF"> ###元font >th >
< th width ="21%" tdata ="subAverage" format ="#.00" align ="left"> 本页均价：< font color ="#0000FF"> ######font >th >
tr >
< tr >
< th width ="20%" tdata ="Count" format ="#" align ="left"> 累计行数：< font color ="#0000FF"> ######font >th >
< th width ="26%" tdata ="Sum" format ="#.##"> 数量累计：< font color ="#0000FF"> ######font >th >
< th width ="14%" align ="right"> 金额累计th >
< th width ="19%" tdata ="Sum" format ="#,##0.00" align ="right">< font color ="#0000FF"> ￥###font >th >
< th width ="21%" tdata ="Average" format ="#.00" align ="left"> 累计均价：< font color ="#0000FF"> ######font >th >
tr >
< tr >
< th width ="20%" tdata ="allCount" format ="#" align ="left"> 全表行数：< font color ="#0000FF"> ######font >th >
< th width ="26%" tdata ="allSum" format ="#.##"> 全表数量总计：< font color ="#0000FF"> ######font >th >
< th width ="14%" align ="right"> 全表金额总计th >
< th width ="19%" tdata ="allSum" format ="#,##0.00" align ="right">< font color ="#0000FF"> ￥###font >th >
< th width ="21%" tdata ="allAverage" format ="#.00" align ="left"> 全表均价：< font color ="#0000FF"> ######font >th >
tr >
< tr >
< th width ="22%" tdata ="subCount" format ="0" align ="left" colspan ="2">
本页A型：< font color ="#0000FF" tclass ="a"> ##font > 行，B型：
< font color ="#0000FF" tclass ="b" tindex ="1"> ##font > 行
th >
< th width ="12%" tdata ="pageNO" format ="#" align ="left" colspan ="2">
< p align ="center"> 第< font color ="#0000FF"> #font > 页p >
th >
< th width ="10%" tdata ="pageCount" format ="#" align ="left">
< p align ="center"> 总< font color ="#0000FF"> #font > 页
th >
tr >
tfoot >
如何打印条形码：
function CreatePrintPage() {
LODOP=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
LODOP.PRINT_INITA(0,0,800,1600," 打印控件功能演示 _Lodop 功能 _ 打印条码 " );
LODOP.ADD_PRINT_BARCODE(28,34,307,47,"128A" ,"123456789012" );
LODOP.ADD_PRINT_BARCODE(84,34,342,78,"128B" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"FontSize" ,20);
LODOP.ADD_PRINT_BARCODE(176,34,199,58,"128C" ,"888888" );
LODOP.SET_PRINT_STYLEA(0,"Color" ,255);
LODOP.ADD_PRINT_BARCODE(237,34,153,54,"EAN8" ,"69012341" );
LODOP.ADD_PRINT_BARCODE(296,34,360,47,"EAN13" ,"6901234567892" );
LODOP.ADD_PRINT_BARCODE(351,34,360,36,"EAN128A" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"ShowBarText" ,0);
LODOP.ADD_PRINT_BARCODE(403,34,360,47,"EAN128B" ,"123456789012" );
LODOP.ADD_PRINT_BARCODE(462,34,360,47,"EAN128C" ,"123456789012" );
LODOP.ADD_PRINT_BARCODE(513,34,360,47,"Code39" ,"*123ABC4567890*" );
LODOP.SET_PRINT_STYLEA(0,"Color" ,16711680);
LODOP.ADD_PRINT_BARCODE(570,34,360,47,"39Extended" ,"*1234567890*" );
LODOP.ADD_PRINT_BARCODE(621,34,360,47,"2_5interleaved" ,"123456789012" );
LODOP.ADD_PRINT_BARCODE(677,34,360,47,"2_5industrial" ,"123456789012" );
LODOP.ADD_PRINT_BARCODE(729,34,360,47,"2_5matrix" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Color" ,8421440);
LODOP.ADD_PRINT_BARCODE(787,34,360,47,"UPC_A" ,"089600124569" );
LODOP.ADD_PRINT_BARCODE(844,34,135,64,"UPC_E0" ,"08960007" );
LODOP.ADD_PRINT_BARCODE(238,426,104,62,"UPC_E1" ,"1111111" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(209,560,62,57,"UPCsupp2" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(374,434,119,59,"UPCsupp5" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(370,559,44,63,"Code93" ,"BJ100080" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(241,663,73,59,"93Extended" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,-90);
LODOP.ADD_PRINT_BARCODE(693,424,49,79,"MSI" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Color" ,16711935);
LODOP.SET_PRINT_STYLEA(0,"ShowBarText" ,0);
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(749,559,44,68,"PostNet" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,90);
LODOP.ADD_PRINT_BARCODE(572,659,44,73,"Codabar" ,"123456789012" );
LODOP.SET_PRINT_STYLEA(0,"Angle" ,-90);
LODOP.ADD_PRINT_BARCODE(30,423,116,114,"QRCode" ,"123123123 版本 3 的最大值是 42 个字符 " );
LODOP.SET_PRINT_STYLEA(0,"QRCodeVersion" ,3);
LODOP.ADD_PRINT_BARCODE(31,587,168,146,"QRCode" ,"1234567890 版本 7 的最大值是 122 个字符 123123" );
LODOP.SET_PRINT_STYLEA(0,"GroundColor" ,16744448);
LODOP.SET_PRINT_STYLEA(0,"QRCodeVersion" ,7);
};
单据打印
printDj:function (){
DjglProcess .lodop=getLodop(document.getElementById('LODOP' ),document.getElementById('LODOP_EM' ));
var strBodyStyle="" ;
strFormHtml=strBodyStyle+""+document.getElementById("_print" ).innerHTML+" " ;
DjglProcess .lodop.add_print_htm(10,60,840,700,strFormHtml);
//DjglProcess.lodop.PRINTA(); //选择打印机打印
DjglProcess .lodop.PREVIEW(); //预览打印
//DjglProcess.lodop.PRINT(); //直接打印
},
入库单列表打印
function prn_Preview() {
CreatePrintPage();
LODOP.PREVIEW(); //打印预览
//LODOP.PRINT_SETUP(); //打印维护
//LODOP.PRINT_DESIGN(); //打印设计
};
function CreatePrintPage() {
LODOP=getLodop(document.getElementById('LODOP'),document.getElementById('LODOP_EM'));
LODOP.PRINT_INITA(0,0,800,1600,"打印控件功能演示 _Ext");
AddText();
LODOP.ADD_PRINT_TEXT(3,653,135,20,"总页号：第 # 页 / 共 & 页 ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",11);
LODOP.SET_PRINT_STYLEA(0,"ItemType",2);
LODOP.SET_PRINT_STYLEA(0,"Horient",1);
LODOP.ADD_PRINT_TEXT(3,34,196,20,"总页眉：《入库单的演示》 ");
LODOP.SET_PRINT_STYLEA(0,"FontSize",11);
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
}
function AddText(){
LODOP.ADD_PRINT_TEXT(25,382,355,30,dj_grid.title);
LODOP.SET_PRINT_STYLEA(1,"FontSize",16);
LODOP.SET_PRINT_STYLEA(1,"Bold",1);
//设置表格样式
var strTableStyle="table{width:'100%';border-collapse: collapse;} table thead td b{font-size: 25px;} table tr td{font-size: 13px;} table tfoot td{font-size: 15px;}";
//将数据拼成一个 table
var strTableStartHtml="";
var strTableEndHtml="";
var strTableTheadHtml="";
var strTableTrHtml="";
for(var i=0;i
var td=""+dj_grid.getColumnModel().getColumnHeader(i)+" ";
strTableTheadHtml+=td;
}
strTableTheadHtml+="条形码
strTableTheadHtml+="";
var zjeTotal=0;
for(var i=0;i
var td ="";
td+=dj_grid.getStore().getAt(i).get("djh");
td+="";
td+=Ext.util.Format.date(dj_grid.getStore().getAt(i).get("djrq"),'Y年 m 月 d 日 ');
td+="";
td+=dj_grid.getStore().getAt(i).get("ghsmc");
td+="";
var zje=dj_grid.getStore().getAt(i).get("zje");
zjeTotal+=parseFloat(zje);
td+=Ext.util.Format.number(zje,'0,0.00');
td+=" ";
td+=dj_grid.getStore().getAt(i).get("djzt");
td+="";
td+="";
strTableTrHtml+=td;
}
var strTableTfoot="合计 "+Ext.util.Format.number(zjeTotal,'0,0.00')+" ";
var strPageFooter="<表格页脚 > 本页动态合计 第 # 页
总 # 页 # ";
LODOP.ADD_PRINT_HTM(50,0,800,1000,strTableStyle);
LODOP.ADD_PRINT_TABLE(75,0,"100%","85%",strTableStartHtml+strTableTheadHtml+strTableTrHtml+strPageFooter+strTableEndHtml);
var j=81;
for(var i=0;i
j=j+30;
LODOP.ADD_PRINT_BARCODE(j,734,37,22,"128A",dj_grid.getStore().getAt(i).get("djh"));
if(j%1011==0){j=81;LODOP.NewPage();}
}
};
你可能感兴趣的:(javascript)
Long类型前后端数据不一致
igotyback
前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
跳房子的前端
前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
JavaScript `Map` 和 `WeakMap`详细解释
跳房子的前端
JavaScript 原生方法 javascript 前端 开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是
hai40587
npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
高性能javascript--算法和流程控制
海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩
马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
JavaScript中秋快乐！
Q_w7742
javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三)
听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构
张某布响丸辣
nginx 前端 架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点
ZhangTao_zata
前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
【JS】前端文件读取FileReader操作总结
程序员-张师傅
前端 前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
webstorm报错TypeError: this.cliEngine is not a constructor
Blue_Color
点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几
uthRaman
前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器
小于负无穷
前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
2019-05-29 vue-router的两种模式的区别
Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
electron多标签页模式更像客户端
diygwcom
electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
外卖霸王餐返利外卖会员卡小程序开发
闹小艾
good506070 微信小程序 小程序
外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
Axure设计之全屏与退出全屏交互实现
招风的黑耳
Axure axure 交互
在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
全面指南：用户行为从前端数据采集到实时处理的最佳实践
数字沉思
营销 流量运营 系统架构 前端 内容运营 大数据
引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
EcmaScript和JavaScript的区别
每天吃八顿
前端 ecmascript
ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
javascript添加p元素，html添加文字，appendChild
游勇一
javascript html添加p appendChild
javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制
SteveJi666
WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示
睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
如何在 Python 中声明一个静态属性?
潮易
python 开发语言
在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
数据格式：什么是JSON和XML
isNotNullX
json xml
JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
HighCharts图表自动化简介
知识的宝藏
Selenium高级篇 Selenium图表自动化测试 highcharts图表自动化 Selenium图表自动化 图表自动化测试 highcharts Selenium
什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
Hadoop(一)
朱辉辉33
hadoop linux
今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。
首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.
在hdfs下，运行hadoop fs -mkdir /u
maven An error occurred while filtering resources
blackproof
maven 报错
转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources
maven报错：
maven An error occurred while filtering resources
Maven -> Update Proje
jdk常用故障排查命令
daysinsun
jvm
linux下常见定位命令：
1、jps 输出Java进程
-q 只输出进程ID的名称，省略主类的名称；
-m 输出进程启动时传递给main函数的参数；
&nb
java 位移运算与乘法运算
周凡杨
java 位移 运算 乘法
对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：
问题：
用最有效率的方法算出2 乘以8 等於几?”
答案：2 << 3
由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
java中的枚举(enmu)
g21121
java
从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举：
public enum ResultType {
/**
* 成功
*/
SUCCESS,
/**
* 失败
*/
FAIL,
MQ初级学习
510888780
activemq
1.下载ActiveMQ
去官方网站下载：http://activemq.apache.org/
2.运行ActiveMQ
解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。
启动ActiveMQ以后，登陆：http://localhos
Spring_Transactional_Propagation
布衣凌宇
spring transactional
//事务传播属性
@Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个
@Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务
@Transactional(propagation=Propagation.REQUIREDS_N
我的spring学习笔记12-idref与ref的区别
aijuans
spring
idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如：
<bean id ="theTargetBean" class="..." />
<bean id ="theClientBean" class=&quo
Jqplot之折线图
antlove
js jquery Web timeseries jqplot
timeseriesChart.html
<script type="text/javascript" src="jslib/jquery.min.js"></script>
<script type="text/javascript" src="jslib/excanvas.min.js&
JDBC中事务处理应用
百合不是茶
java JDBC编程 事务控制语句
解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复
事务常用命令:
Commit提交
[转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论
bijian1013
java 多线程 线程安全 HashMap
在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
ng-if与ng-show、ng-hide指令的区别和注意事项
bijian1013
JavaScript AngularJS
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
【持久化框架MyBatis3七】MyBatis3定义typeHandler
bit1129
TypeHandler
什么是typeHandler?
typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射
内置typeHandler
MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
上传下载文件rz,sz命令
bitcarter
linux命令rz
刚开始使用rz上传和sz下载命令：
因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求：
我遇到的问题：
sz下载A文件10M左右，没有问题
但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题
解决方法：
上传命令改为;rz -ybe
下载命令改为：sz -be filename
如果还是有问题：
那就是文
通过ngx-lua来统计nginx上的虚拟主机性能数据
ronin47
ngx-lua 统计 解禁ip
介绍
以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能
支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计.
可以统计与query-times request-time
java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132
bylijinnan
java
import java.util.Arrays;
import java.util.Comparator;
public class MinNumFromIntArray {
/**
* Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。
* 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
Oracle基本操作
ccii
Oracle SQL总结 Oracle SQL语法 Oracle基本操作 Oracle SQL
一、表操作
1. 常用数据类型
NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位
NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位）
VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位）
CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
[强人工智能]实现强人工智能的路线图
comsci
人工智能
1：创建一个用于记录拓扑网络连接的矩阵数据表
2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图
3：将这个流程图导入到矩阵数据表中
4：在矩阵的每个有意义的节点中嵌入一段简单的
给Tomcat，Apache配置gzip压缩(HTTP压缩)功能
cwqcwqmax9
apache
背景：
HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
SpringMVC and Struts2
dashuaifu
struts2 springMVC
SpringMVC VS Struts2
1:
spring3开发效率高于struts
2:
spring3 mvc可以认为已经100%零配置
3:
struts2是类级别的拦截， 一个类对应一个request上下文，
springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应
所以说从架构本身上 spring3 mvc就容易实现r
windows常用命令行命令
dcj3sjt126com
windows cmd command
在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
再看知名应用背后的第三方开源项目
dcj3sjt126com
ios
知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《
iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者
@iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了
Facebook Paper使用的第三
Objective-c单例模式的正确写法
jsntghf
单例 ios iPhone
一般情况下，可能我们写的单例模式是这样的：
#import <Foundation/Foundation.h>
@interface Downloader : NSObject
+ (instancetype)sharedDownloader;
@end
#import "Downloader.h"
@implementation
jquery easyui datagrid 加载成功，选中某一行
hae
jquery easyui datagrid 数据加载
1.首先你需要设置datagrid的onLoadSuccess
$(
'#dg'
).datagrid({onLoadSuccess :
function
(data){
$(
'#dg'
).datagrid(
'selectRow'
,3);
}});
2.onL
jQuery用户数字打分评价效果
ini
JavaScript html jquery Web css
效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery用户数字打分评分代码 - HoverTree</
mybatis的paramType
kerryg
DAO sql
MyBatis传多个参数：
1、采用#{0},#{1}获得参数：
Dao层函数方法：
public User selectUser(String name,String area);
对应的Mapper.xml
<select id="selectUser" result
centos 7安装mysql5.5
MrLee23
centos
首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。
#列出所有被安装的rpm package rpm -qa | grep mariadb
#卸载
rpm -e mariadb-libs-5.
利用thrift来实现消息群发
qifeifei
thrift
Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
实现一个sizeof获取Java对象大小
teasp
java HotSpot 内存 对象大小 sizeof
由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。
SVN错误及处理
xiangqian0505
SVN提交文件时服务器强行关闭
在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found
文件：repository/db/txn_current、repository/db/current
其中current记录当前最新版本号，txn_current记录版本库中版本
