Fineui中使用Lodop打印，后台调用前台JS方式打印GRID

最新推荐文章于 2022-07-28 22:56:29 发布

abc32644

最新推荐文章于 2022-07-28 22:56:29 发布

阅读量344

点赞数

分类专栏： C#.Fineui

本文链接：https://blog.csdn.net/abc32644/article/details/125838830

版权

javascript c#

C#.Fineui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>