时间戳

首页 > 解决方案 > 使用 AngularJS 打印 div 内容

angularjs - 使用 AngularJS 打印 div 内容

问题描述

我们尝试使用 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);

在此处输入图像描述

标签： angularjsangularjs-directiveangularjs-ng-repeatangularjs-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>
  1. 单击“打印”按钮调用 window.print()，它将简单地打印 HTML 中存在的视图。

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

推荐阅读