前端之家

  1. 首页
  2. 问答

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

使用AngularJS打印div内容

einspei 回答：使用AngularJS打印div内容

我认为您不必使事情变得复杂，请尝试以下操作：

  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格式显示的视图。

这应该可以解决您的问题，请尝试一下。

angularjsangularjs-componentsangularjs-directiveangularjs-ng-repeat
本文链接：https://www.f2er.com/3008198.html

大家都在问