[lodop]css样式after、before添加content内容之前和之后

css样式可以在内容之前和之后加内容。
格式是：
css类名:before{content:在之前加的内容}
css类名:after{content:在之后加的内容}
这种写法在LODOP里直接测试是不行的，所以建议用其他方法所代替，例如用JS，或字符串直接拼接。
content:attr(class);可以用类型，在JS中，可用:对象.className获取到类名。
测试代码：

<script language="javascript" src="LodopFuncs.js"></script>
<style id="style1">
.c1:after
{
content:attr(class);
}
.c1:before
{
content:"之前";
}
.c2{color:blue;}
</style>
</head>
<body>
<div id="div1">
<p class="c1" id="c1">这是p标签里的内容</p>
</div>
<div id="div2">
<p class="c2" id="c2">这是p标签里的内容</p>
</div>
<a href="javascript:prn1_preview()">content前后加内容</a><br>
<a href="javascript:prn2_preview()">innerHTML前后加内容</a><br>
<script language="javascript" type="text/javascript">   
        var LODOP; //声明为全局变量 
    function prn1_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        var strBodyStyle="<style>"+document.getElementById("style1").innerHTML+"</style>";
        var strDivHtml=strBodyStyle+"<body>"+document.getElementById("div1").innerHTML+"</body>";
        LODOP.ADD_PRINT_HTM(10,10,300,200,strDivHtml);
        LODOP.PREVIEW();    
    };
    function prn2_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        var p=document.getElementById("c2");
        console.log(p);
        var strp=p.innerHTML;
        console.log(strp);
        var classP=p.className;
        console.log(classP);
        p.innerHTML="之前"+strp+classP;
        LODOP.ADD_PRINT_HTM(10,10,300,200,document.getElementById("c2").innerHTML);
        LODOP.PREVIEW();    
    };
</script> 
</body>

图示：

用after、before和content给内容前后加上的，打印设计可以显示，预览出现问题。
用JS给前后内容加上的，预览正常。
（建议不用after，before和content给内容前后加内容，可以用JS或其他方式实现）

posted @ 2019-11-19 16:21  花谢悦神  阅读(900)  评论(0)  编辑  收藏  举报