In this article I will explain with an example, how to print DIV contents with CSS using AngularJS.
This article will illustrate how to print DIV contents with styles in external CSS file without opening new window in AngularJS.
 
 
External CSS file
The following external CSS file contains the styling for the HTML DIV.
.label
{
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial;
}
.contents
{
    border: 1px dotted black;
    padding: 5px;
    width: 300px;
}
.name
{
    color: #18B5F0;
}
.left
{
    float: left;
    width: 50px;
    height: 50px;
}
.right
{
    margin-left: 60px;
    line-height:50px;
}
.clear
{
    clear: both;
}
 
 
Printing DIV contents with CSS using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML DIV whose contents will be printed and a Button.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The Button has been assigned ng-click directive. When the Image is clicked, the PrintDIV function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Inside the PrintDIV function, first the contents of the HTML DIV to be printed are extracted.
Then a dynamic IFRAME is created and the extracted contents of the HTML DIV are written to the IFRAME along with the link to the external CSS file and finally the IFRAME document is printed using the JavaScript Window Print command and the IFRAME is removed from the page.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.PrintDIV = function () {
                var contents = document.getElementById("dvContents").innerHTML;
                var body = document.getElementsByTagName("BODY")[0];
 
                //Create a dynamic IFRAME.
                var frame1 = document.createElement("IFRAME");
                frame1.name = "frame1";
                frame1.setAttribute("style", "position:absolute;top:-1000000px");
                body.appendChild(frame1);
 
                //Create a Frame Document.
                var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
                frameDoc.document.open();
 
                //Create a new HTML document.
                frameDoc.document.write('<html><head><title>DIV Contents</title>');
                frameDoc.document.write('</head><body>');
 
                //Append the external CSS file.
                frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
 
                //Append the DIV contents.
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
 
                $window.setTimeout(function () {
                    $window.frames["frame1"].focus();
                    $window.frames["frame1"].print();
                    body.removeChild(frame1);
                }, 500);
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <link href="style.css" rel="stylesheet" type="text/css" />
        <div id="dvContents">
            <div class="left">
                <img alt="" src="images/ASPSnippets.png" />
            </div>
            <div class="right">
                <span class="label">ASPSnippets.com Sample page</span>
            </div>
            <div class="clear">
            </div>
            <hr />
            <div class="contents">
                <span class="label">Hello,
                    <br />
                    This is <span class="name">Mudassar Khan</span>.<br />
                    Hoping that you are enjoying my articles! </span>
            </div>
        </div>
        <br />
        <input type="button" value="Print" ng-click="PrintDIV()" />
    </div>
</body>
</html>
 
 
Screenshots
HTML DIV Contents
Print DIV contents with CSS using AngularJS
 
Printed HTML DIV with CSS
Print DIV contents with CSS using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code