zoukankan      html  css  js  c++  java
  • BootStrap带样式打印

    在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式。

    我在jquery.PrintArea.js的基础上改造了下打印的方法:

    (function ($) {
        var printAreaCount = 0;
        $.fn.printArea = function () {
            var ele = $(this);
            var idPrefix = "printArea_";
            removePrintArea(idPrefix + printAreaCount);
            printAreaCount++;
            var iframeId = idPrefix + printAreaCount;
            var iframeStyle = 'position:absolute;0px;height:0px;left:-500px;top:-500px;';
            iframe = document.createElement('IFRAME');
            $(iframe).attr({
                style: iframeStyle,
                id: iframeId
            });
            document.body.appendChild(iframe);
            var doc = iframe.contentWindow.document;
            $(document).find("link").filter(function () {
                return $(this).attr("rel").toLowerCase() == "stylesheet";
            }).each(
                    function () {
                        doc.write('<link type="text/css" rel="stylesheet" href="'
                                + $(this).attr("href") + '" >');
                    });
            doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
                    + '</div>');
            doc.close();
            var frameWindow = iframe.contentWindow;
            frameWindow.close();
            frameWindow.focus();
            frameWindow.print();
        }
        var removePrintArea = function (id) {
            $("iframe#" + id).remove();
        };
    
    
        $.fn.printAreas = function () {
            var ele = $(this);
            winname = window.open('', "_blank", '');
            var doc = winname.document;
            $(document).find("link").filter(function () {
                return $(this).attr("rel").toLowerCase() == "stylesheet";
            }).each(
                    function () {
                        doc.write('<link type="text/css" rel="stylesheet" href="'
                                + $(this).attr("href") + '" >');
                    });
            doc.write($(ele).html());
            doc.close();
            winname.print();
        }
    
    })(jQuery);

    前台调用的时候,把table放在一个div里,打印div即可:

           <div class="ibox-content" id="divprint">
                                <table id="tablePrint" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                                    <thead>
                                        <tr>
                                            <th class="text-center">项目</th>
                                            <th class="text-center">部门</th>
                                            <th class="text-center">营业收入</th>
                                            <th class="text-center">利润</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                            <tr>
                                              <td class="text-center">@item.ProjectName</td>
                                              <td class="text-center">@item.DepartNameS</td>
                                              <td class="text-right"><a onclick="loadDetail('@item.ProjectId','@item.DepartId')">@item.InComeS</a></td>
                                       <td class="text-right"><a  onclick="loadProftsDetail('@item.ProjectId','@item.DepartId')">@item.ProfitS</a></td>
                                           </tr>
                                        }
                                    </tbody>
                                </table>
                                <div class="dataTables_paginate paging_bootstrap pagination">
                                  
                                </div>
                            </div>

    js调用:

       //打印
            $("#print").click(function ()
                $("#divprint").printAreas();
            });
  • 相关阅读:
    纠结我一上午的asp.net操作mysql问题
    C#术语【转自MSDN】
    asp.net新手必知必会——我们为什么要用asp.net
    图片在浏览器中底部对齐———解决方法之一
    asp.net做的网站比asp做的站慢?
    我是一个可悲的程序员
    今天离开职场去过自己的潇洒人生
    asp.net应用程序重新启动
    asp.net分页解决方法
    80. 删除有序数组中的重复项 II
  • 原文地址:https://www.cnblogs.com/kennyliu/p/5009416.html
Copyright © 2011-2022 走看看