使用 AngularJS 打印 div 内容答案

【问题标题】：Print the div content using AngularJS使用 AngularJS 打印 div 内容
【发布时间】：2020-03-24 23:03:18
【问题描述】：

我们尝试使用 AngularJS 打印内容。我们尝试使用 ng-bind 绑定元素，但数据没有显示在文档中。我们附上了下面的屏幕截图，请告诉我们哪里做错了.

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);

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat angularjs-components

【解决方案1】：

我觉得你没必要把事情复杂化，试试下面的东西：

以您想要的打印方式创建一个包含所有数据的 HTML 页面。

例子：

<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>

点击“打印”按钮调用 window.print()，它只会打印 HTML 中的视图。

这应该可以解决你的问题，试试这个。

【讨论】：