Печать того, что находится внутри модального

У меня есть модальный, где я хочу напечатать его полное содержание. Я не хочу, чтобы что-то еще печаталось в стороне от того, что находится в модальном.

Здесь я создал кнопку в модальном:

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)

так же, как и раньше

1 ответ

  1. С обновленным кодом и окном.печать внутри функции evalAsync позволяет печатать содержимое внутри модального файла

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