打印模态内的内容

Question

我有一个模式，我想打印它的全部内容。我不希望在模态中打印任何其他内容。

这里我在模式中创建了按钮：

This should not be printed...
    <button id="btnPrint">Print (this btn should not be printed!)</button>

    <hr />

    <div id="printThis">
        This should BE printed!
    </div>

    <div id="printThisToo">
        This should BE printed, too!
    </div>

按钮旁边有一些文字，但当您单击按钮预览打印视图时，这些文字不应显示。

这里我写了一些js来显示应该打印什么内容：

document.getElementById("btnPrint").onclick = function() {
    printElement(document.getElementById("printThis"));
    printElement(document.getElementById("printThisToo"), true, "<hr />");
    window.print();
}

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof(delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof(delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

终于写了一些css:

@media screen {
  #printSection {
      display: none;
  }
}

@media print {

    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #101010;
        background: #f6f5fa;
        visibility:hidden;
    }
  #printSection, #printSection {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }

}

当我点击模式中的按钮时，没有任何反应，控制台中也没有出现错误。不确定是什么问题。任何帮助将不胜感激。

更新代码：

(HTML)

    <div>
        This should not be printed...
        <button ng-click="printPreview()">Print (this btn should not be printed!)</button>
    </div>

    <hr />

    <div id="printThis">
        This should BE printed!
    </div>

(JS)

var app = angular.module('dmdesktop');

app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc']
function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

    $scope.printPreview = function() {
        printElement(document.getElementById("printThis"));
    }

    function printElement(elem) {
        alert ("printing!");
        var domClone = elem.cloneNode(true);

        var $printSection = document.getElementById("printSection");

        if (!$printSection) {
            var $printSection = document.createElement("div");
            $printSection.id = "printSection";
            document.body.appendChild($printSection);
        }

        $printSection.innerHTML = "";
        $printSection.appendChild(domClone);
        window.print();
    }
}

(CSS)

和以前一样

Answer 1

使用更新后的代码和 window.print 在 evalAsync 函数中允许您在模态

中打印内容

 $scope.$evalAsync(function () {
            window.print();
        });

打印模态内的内容

Printing what is inside a modal

html

css

angularjs

bootstrap-modal

angularjs-ng-click