• LODOP中设置设置图片平铺水印,超文本透明


    之前的博文:LODOP中平铺图片 文本项Repeat、 该博文中是平铺的图片,上面是文本。
    如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过打印项的层级关系,图片在下层,文字在上层,对文字后面进行背景平铺。关于层级,可查看本博客另一篇相关博文:Lodop调整打印项输出顺序 覆盖与层级、

    上面的第一个链接博文,中是用图片作为底图进行平铺,上面是add_print_text纯文本,由于lodop中的纯文本本身就是无背景色的,所以可以看到下方的背景图。
    如果是超文本,除了要注意层级关系,还有注意去掉超文本本身的背景色,让超文本变透明,才能透过超文本看到底下的水印,css样式里有个设置背景色为transparent透明,可以加上这个。如果超文本本身自带背景色,那么需要去掉超文本本身的背景色。

    如果不想去掉超文本的背景色,想在超文本背景色和超文本内容文字之间加上水印,让水印在背景色上面,文字下面,是不行的,因为平铺的图片和超文本是两个打印项,不可能将水印放到图片和背景色之间。
    如果位置固定,或者直接用合成图,把水印和背景合成起来做成一张适合纸张的大图,目前没有发现其他的很好的处理方法。关于合成一个大图背景,可查看本博客另一篇博文的图示,或者把水印加在文字上方,但是水印部分会遮挡文字,目前发布的正式版没有加透明度的功能。

    测试代码:

    <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;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;60mm;height:60mm;</style>";
            //var styleN2="<style>#p{background-color:transparent;padding:20mm;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>

    图示:

  • 相关阅读:
    100行代码实现了多线程,批量写入,文件分块的日志方法
    阿里云客户端开发技巧
    阿里云客户端的实现(支持文件分块,断点续传,进度,速度,倒计时显示)
    类库间无项目引用时,在编译时拷贝DLL
    数据库-锁的实践
    Node.js学习资料
    文档流转,文档操作,文档归档(一)
    滑动验证码研究-后续
    iTextSharp 116秒处理6G的文件
    在职场中混,"讲演稿"的重要性
  • 原文地址:https://www.cnblogs.com/huaxie/p/11646496.html
Copyright © 2020-2023  润新知