打印模态

时间:2017-01-17 17:52:17

标签: html css angularjs bootstrap-modal angularjs-ng-click

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

这里我在模态中创建了按钮:

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 个答案:

答案 0 :(得分:0)

使用evalAsync函数中的更新代码和window.print,您可以在模态中打印内容

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