LODOP中設置設置圖片平鋪水印,超文本透明

以前的博文:LODOP中平鋪圖片 文本項Repeat、 該博文中是平鋪的圖片,上面是文本。
若是是圖片add_print_image和add_print_text純文本,這兩個打印項設計的,能夠直接經過打印項的層級關係,圖片在下層,文字在上層,對文字後面進行背景平鋪。關於層級,可查看本博客另外一篇相關博文:Lodop調整打印項輸出順序 覆蓋與層級、javascript

上面的第一個連接博文,中是用圖片做爲底圖進行平鋪,上面是add_print_text純文本,因爲lodop中的純文本自己就是無背景色的,因此能夠看到下方的背景圖。
若是是超文本,除了要注意層級關係,還有注意去掉超文本自己的背景色,讓超文本變透明,才能透過超文本看到底下的水印,css樣式裏有個設置背景色爲transparent透明,能夠加上這個。若是超文本自己自帶背景色,那麼須要去掉超文本自己的背景色。css

若是不想去掉超文本的背景色,想在超文本背景色和超文本內容文字之間加上水印,讓水印在背景色上面,文字下面,是不行的,由於平鋪的圖片和超文本是兩個打印項,不可能將水印放到圖片和背景色之間。
若是位置固定,或者直接用合成圖,把水印和背景合成起來作成一張適合紙張的大圖,目前沒有發現其餘的很好的處理方法。關於合成一個大圖背景,可查看本博客另外一篇博文的圖示,或者把水印加在文字上方,可是水印部分會遮擋文字,目前發佈的正式版沒有加透明度的功能。html

測試代碼:java

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
<style>#p{background-color:#bbf1f2;padding:20mm;width:60mm;height:60mm;</style>
</head>
<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(""); LODOP.ADD_PRINT_IMAGE(0,0,"100mm","100mm","<img src='./sy.png'>"); LODOP.SET_PRINT_STYLEA(0,"Repeat",true); 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.PRINT_DESIGN(); //LODOP.PREVIEW(); 
 }; function prn2_preview() { LODOP=getLodop(); LODOP.PRINT_INIT(""); LODOP.ADD_PRINT_IMAGE(0,0,"100mm","100mm","<img src='sy.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>

圖示:瀏覽器

相關文章
相關標籤/搜索