关于MVC打印问题,打印指定的内容

首先你的内容一定要放在一个div中如下代码

   <div id="divprint">
                    <table class="table table-striped dataTable table-bordered" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
                        <thead>
                            <tr role="row">
                                <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 140px;">用户名ID</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 180px;">用户名</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 160px;">电话</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 140px;">真实姓名</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 140px;">工号</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 167px;">拥有角色</th>
                            </tr>
                        </thead>

                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            @foreach (var item in Model.EntityList)
                            {
                                <tr>
                                    <td class=" sorting_1">@item.OneUser.Uid</td>
                                    <td class=" ">@item.OneUser.UserName</td>
                                    <td class=" ">@item.OneUser.Tel</td>
                                    <td class=" ">@item.OneUser.TrueName</td>
                                    <td class=" ">@item.OneUser.WorkNo</td>
                                    <td class=" ">
                                        @if (item.HasRole!=null&&item.HasRole.Count>0)
                                        {
                                            foreach (var name in item.HasRole)
                                            {
                                                <p>@name</p>
                                            }
                                        }
                                    </td>
                                </tr>
                            }

                            <tr class="odd">
                                <td class=" sorting_1">Gecko</td>
                                <td class=" ">Firefox 1.0</td>
                                <td class=" ">Win 98+ / OSX.2+</td>
                                <td class=" ">1.7</td>
                                <td class=" ">A</td>
                            </tr>
                            <tr class="even">
                                <td class=" sorting_1">Gecko</td>
                                <td class=" ">Firefox 1.5</td>
                                <td class=" ">Win 98+ / OSX.2+</td>
                                <td class=" ">1.8</td>
                                <td class=" ">A</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
              <input type="button" id="btndy" value="打印" />

然后我们看JS代码部分:(注意:因为这里部分打印损坏了HTML代码结构,所以不管你打不打印都要重新加载当前页面,这里我们用window.location.href="/Account/UserManagerMent";或window.reload();

        $(function () {
            $("#btndy").click(function () {
                var headstr = "<html><head><title></title></head><body>";
                var footstr = "</body>";
                var newstr = $("#divprint").html();                   // 获取要打印的div内容
                var oldstr = document.body.innerHTML;                // 将过去的body内容存到oldstr
                document.body.innerHTML = headstr + newstr + footstr;     // 组合打印内容
                window.print();                                  // 弹出打印窗体
                document.body.innerHTML = oldstr;               // 还原HTML内容
                window.location.href="/Account/UserManagerMent";          // 刷新当前页面
            });
        });

至于后台以前是什么样,现在还是什么样,只是刷新一下而已

小Y子的代码和我的差不多

<button onclick="doPrint()">打印</button>
<div id="pri">
111111111
</div>
<script>
function doPrint(){
        var head_str = "<html><head><title></title></head><body>"; //先生成头部
        var foot_str = "</body></html>"; //生成尾部
        var older = document.body.innerHTML;
        var new_str = document.getElementById('pri').innerHTML; //获取指定打印区域
        var old_str = document.body.innerHTML; //获得原本页面的代码
        document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
        window.print(); //打印刚才新建的网页
        document.body.innerHTML = older; //将网页还原
        return false;
}
</script>

 

  

posted @ 2016-04-17 20:20  酒沉吟  阅读(1749)  评论(0编辑  收藏  举报