Print the div content using AngularJS

Question

We were trying to print the content using AngularJS.We tried to bind the elements using ng-bind yet the data is not getting displayed in the document.We have attached the screenshot below and kindly let us know where we have done wrong.

print.component.js

var printItem={
    bindings: {
        onPrint: '&'
    },
    templateUrl: 'app/print-item/print.item.html',
    controller: PrintComponentController
}

function PrintComponentController(){
    var vm=this;
    vm.onPrint=onPrint;
    vm.PrintItem=PrintItem;
    
    function PrintItem(){
        var content = angular.element(document.querySelector("#printproduct"))[0].innerHTML;
        var popupWindow=window.open('','_blank','width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWindow.document.open();
        popupWindow.document.write('<html><head>'+
                '<script type="text/javascript" src="site-assets/libs/jquery-3.3.1.js"></script>'+
                '<link rel="stylesheet" href="site-assets/css/bootstrap.min.css">'+
                '<link rel="stylesheet" href="site-assets/css/custom.css">'+
                ' <script type="text/javascript" src="site-assets/libs/solid.min.js"></script>'+
                '  <script type="text/javascript" src="site-assets/libs/fontawesome.min.js"></script>'+
                '<script type="text/javascript" src="site-assets/libs/angular.min.js"></script>'+
                '</head>'+
                '<body onload="window.print()">'+content+'</body></html>');
        popupWindow.document.close();  
    }

    function onPrint(obj){
        console.log(obj);
    }
}
angular.module('app')
        .component('printItem',printItem);

Kunal Gadhia · Accepted Answer · 2019-11-29 11:09:14Z

I feel that you are unnecessary making things complex, try the following things :

Create an HTML page with all the data in it, in the way you want to print it.

Example:

<div>
    <div>
        <div>
            <button ng-click="window.print()" id="printBtn">
                <i class="fa fa-print"></i>Print
            </button>
        </div>
    </div>
</div>
<section id="exportDetails">
    <div class="container-fluid">
         <div class="printTableTwo">
              <div class="printTitle">
                   <h3>Table Title</h3>
              </div>
              <table class="printTable">
                  <thead>
                      <tr>
                          <th>#</th>
                          <th>Column 1 Header </th>
                          <th>Column 2 Header</th>
                      </tr>
                 </thead>
                 <tbody>
                      <tr>
                          <td data-title="#">{{$index}}</td>
                          <td data-title="Title 1">{{Your Values}}</td>
                          <td data-title="Title 2">{{Your Values}}</td>
                      </tr>
                 </tbody>
              </table>
          </div>
    </div>
</section>

On click of the 'Print' button call window.print(), it will simply print the view present in HTML.

This should solve your problem, Give this a try.

Collectives™ on Stack Overflow

Print the div content using AngularJS

print.component.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

print.component.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related