网页显示样式:
打印预览样式:
源代码:
<!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进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。