Fineui中使用Lodop打印，后台调用前台JS方式打印GRID
舒俊雄
1、页面内引入打印控件Lodop(先到Lodop官网下载安装http://www.lodop.net/)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../../res/js/LodopFuncs.js"></script>
<title></title>
</head>
<body>
2、页面定义按钮
<f:Button runat="server" ID="printbutton" Icon="Printer" Text="测试打印" OnClick="print_Click" />
3、后台按钮代码
protected void print_Click(object sender, EventArgs e)
{
PageContext.RegisterStartupScript("javascript:prn_preview()");
}
4、打印Grid内容，
</f:Grid>
<f:Grid runat="server" ID="grid_mx" title="测试" >
<Columns>
<f:RowNumberField runat="server"></f:RowNumberField>
<f:RenderField runat="server" DataField="R1" HeaderText="字段1"/>
<f:RenderField runat="server" DataField="R2" HeaderText="字段2"/>
<f:RenderField runat="server" DataField="R3" HeaderText="字段3"/>
<f:RenderField runat="server" DataField="R4" HeaderText="字段4"/>
</Columns>
</f:Grid>
5、前端页面调用
<script>
var LODOP; //声明为全局变量
var grid_id= '<%= grid_mx.ClientID %>';//直接传ID值取不到
function prn_preview()
{
LODOP = getLodop();
LODOP.PRINT_INIT("打印控件功表单一");
//导入head样式
var strheadStyle = "<head>" + document.getElementById("head1").innerHTML + "</head>";
var strFormHtml = strheadStyle + document.getElementById(grid_id).innerHTML;
LODOP.ADD_PRINT_HTML(100, 0, "100%", "100%", strFormHtml);
//名称：增加超文本打印项(图形模式)
//格式：ADD_PRINT_HTML(Top,Left,Width,Height, strHtmlContent)
LODOP.PREVIEW();
}
</script>
第一次接触lodop, 做个笔记 .
类似资料：