在翡翠页面上打印特定的 div 元素答案

【问题标题】：Printing a specific div element on a jade page在翡翠页面上打印特定的 div 元素
【发布时间】：2016-01-06 11:36:00
【问题描述】：

我有一个 Jade 文件 html

include ../../../public/UI-Master-Layout/Jade/userMenu.jade
include ../../../public/UI-Master-Layout/Jade/footer.jade
include ../../mixinHelp.jade

div.container.cstm-panel-heading(ng-controller="studentInformationCtrl")
.container
    .row
        .col-lg-12
            div#printableArea
            table.cstm-panel-heading.darkgray(align='center')
                colgroup
                    col(width="50%")
                    col(width="50%")
                tbody
                    tr
                        td(colspan='2' align='center') Student Information
                    tr
                        td First Name
                        td  {{student.firstName}}
                    tr
                        td Last Name
                        td {{student.lastName}}
          button.btn.btn-info.pull-right(type='button',ng-click="printDiv('printableArea')") Print

我有我的控制器文件

angular.module('XXXX')
.controller('studentInformationCtrl', ['$scope', '$http','$window', function ($scope, $http, $window) {
    $scope.printDiv = function(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var popupWin = window.open('', '_blank', 'width=300,height=300');
        popupWin.document.open()
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
        popupWin.document.close();
    }
}]);

如果我只是做一个 $window.print() 我得到打印的值。但我正在尝试打印选定的 div printableArea。我错过了什么吗

【问题讨论】：

标签： html angularjs pug

【解决方案1】：

经过一番搜索，我可以使用 jQuery 解决它

$scope.printDiv = function(divName) {
        var html = "";
        $('link').each(function() {
            if ($(this).attr('rel').indexOf('stylesheet') !=-1) {
                html += '<link rel="stylesheet" href="'+$(this).attr("href")+'" />';
            }
        });
        html += '<body onload="window.focus(); window.print()">' + $("#" + divName).html()+'</body>';
        var w = window.open("","print");
        if (w) { w.document.write(html); w.document.close() }
    }

【讨论】：