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;width: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();

        });

巴特西

BootStrap带样式打印

最新文章

热门文章