暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

使用Lodop打印有样式的表格

云自由 2022-09-12
421

网页显示样式:

打印预览样式:

源代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title> New Document </title>
 <meta name="Generator" content="NPP-Plugin">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <script language="javascript" src="LodopFuncs.js"></script>

</head>
<body>
<div id="tb1">
<table  >
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>aaaa</td><td>F</td><td>11</td></tr>
<tr><td>bbbb</td><td>F</td><td>22</td></tr>
<tr><td>ccc</td><td>M</td><td>33</td></tr>
<tr><td>ddd</td><td>M</td><td>44</td></tr>
<tfoot>
<tr >
<td colspan="3" >经办人:张三   打印日期:888888</td>
</tr>
</tfoot>
</table>
</div>

<div>增加表格线样式输出<a href="javascript:myPreview3()">预览细线样式打印</a></div>

<script language="javascript" type="text/javascript">
   var LODOP; //声明为全局变量

function myPreview3(){
LODOP=getLodop();  
var strBodyStyle="<style>table{width:100%; margin:auto; font:'宋体' 11px;color:#333333;text-align:left;border-collapse:collapse;}tr{height:40px;}td,th{padding:5px;border:1px solid #000;}tfoot td{border:0;}</style>";
var strFormHtml=strBodyStyle+"<body>"+document.getElementById('tb1').innerHTML+"</body>";
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_样式风格");
LODOP.SET_PRINT_STYLE("FontSize",20);
LODOP.SET_PRINT_STYLE("HOrient",2);
LODOP.ADD_PRINT_TEXT(50,50,260,39,"细线样式打印");
LODOP.ADD_PRINT_HTM(100,0,"90%","90%",strFormHtml);

LODOP.PREVIEW();
};

</script>
</body>
</html>
复制


文章转载自云自由,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论