LODOP打印超文本保留背景色带平铺水印

时间:2024-09-29 16:37:56

前面的博文:LODOP中设置设置图片平铺水印,超文本透明、 介绍过 ,如果不想去掉超文本的背景色,想在超文本背景色和超文本内容文字之间加上水印,让水印在背景色上面,文字下面,是不行的,因为平铺的图片和超文本是两个打印项,不可能将水印图片放到内容和背景色之间。

但是如果有这个需求,文字部分有背景色,也有平铺整个纸张的图片,如果只是用LODOP的图片输出打印,和超文本打印项这样 ,是实现不了的,要么是有背景色的超文本打印项覆盖图片,要么是图片覆盖超文本。因为两个都是不透明的,两个的言行肯定会相互覆盖。

个人想到的方法,1.让水印图片在最上层,让白色部分透明,类似在文字上盖章的公章打印。(但是这样,如果水印图片不透明的部分肯定会覆盖部分文字,如果本身水印不透明的较少,不影响阅读,还是可以的)(有的打印机不支持该种透明,有的虚拟打印机也不支持,注意需要实际测试)
2.用合成图,如果内容比较固定,可以给超文本去掉背景色,然后用水印和背景色的合成图,这种水印可以实现水印在背景色之上的类似效果。关于合成图,之前也有个博文(Lodop打印控件 打印透明图问题

测试代码:

<script language="javascript" src="LodopFuncs.js"></script>
</head>
<style>#p{background-color:#bbf1f2;padding:20mm;width:60mm;height:60mm;</style>
<body>
<div id="printN">
<div id="p">
官网样例是混合部署LodopFuncs.js里已经写好了判断。
客户端是浏览器支持np插件,是32位浏览器,就会提示下载32位的Lodop插件:install_lodop32.exe
客户端浏览器支持np插件,是64位浏览器,就会提示下载64位的Lodop插件:install_lodop64.exe
客户端浏览器不支持np插件(判断如高版本谷歌火狐等),会提示下载C-Lodop方式: CLodop_Setup_for_Win32NT.exe
</div>
</div>
<a href="javascript:prn1_preview()">打印预览(不去除背景色,水印在文字上层,只去白色背景)</a><br>
<a href="javascript:prn2_preview()">打印预览 不可变形缩放(去掉背景色,背景色和水印合成图,文字带有背景色)</a>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
var styleN="<style>#p{background-color:#bbf1f2;padding:20mm;width:60mm;height:60mm;</style>";
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",styleN+document.getElementById("printN").innerHTML);
LODOP.ADD_PRINT_IMAGE(0,0,"100mm","100mm","<img transcolor='#FFFFFF' src='./sy.png'>");//白色转透明
LODOP.SET_PRINT_STYLEA(0,"Repeat",true);
LODOP.PREVIEW();
};
function prn2_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_IMAGE(0,0,"210mm","297mm","<img src='bg.png'>");//合成图
//LODOP.SET_PRINT_STYLEA(0,"Repeat",true);
var styleN="<style>#p{padding:20mm;width:60mm;height:60mm;</style>";
//var styleN2="<style>#p{background-color:transparent;padding:20mm;width:60mm;height:60mm;</style>";
//或加css样式,background-color:transparent;,背景色透明
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",styleN+document.getElementById("printN").innerHTML);
LODOP.PREVIEW();
};
</script>
</body>

图示:

LODOP没有办法在把一张水印图片插入一个超文本打印项的内容和背景色之间,两个打印项只会相互覆盖,只能用其他方法处理。
图中的合成图,把被背景色P到背景图上,合成一张平铺的背景图,这样效果类似,也不会遮挡文字。

LODOP打印超文本保留背景色带平铺水印