有没有一种从HTML页面打印div的Angular方法？

华景同

2023-03-14

问题内容：

我有一个使用AngularJS的html页面，我想从中打印一个div。有Angular的方法吗？..或它只是下面的经典javascript方法：

    <script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML =
        "<html><head><title></title></head><body>" +
        divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;
        }
    </script>

如果AngularJS周围没有任何东西，您能建议不使用JavaScript函数的方式吗（例如：doc.getElementById（））..一种类似于AngularJS方式的方法吗？

谢谢，

问题答案：

我创建了一个简单的指令，用于使用iframe技术打印div内容。有点破烂，但效果很好。我认为没有更好的方法。指令脚本是：

'use strict';

angular.module('yourAppNameHere').directive('printDiv', function () {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('click', function(evt){    
        evt.preventDefault();    
        PrintElem(attrs.printDiv);
      });

      function PrintElem(elem)
      {
        PrintWithIframe($(elem).html());
      }

      function PrintWithIframe(data) 
      {
        if ($('iframe#printf').size() == 0) {
          $('html').append('<iframe id="printf" name="printf"></iframe>');  // an iFrame is added to the html content, then your div's contents are added to it and the iFrame's content is printed

          var mywindow = window.frames["printf"];
          mywindow.document.write('<html><head><title></title><style>@page {margin: 25mm 0mm 25mm 5mm}</style>'  // Your styles here, I needed the margins set up like this
                          + '</head><body><div>'
                          + data
                          + '</div></body></html>');

          $(mywindow.document).ready(function(){
            mywindow.print();
            setTimeout(function(){
              $('iframe#printf').remove();
            },
            2000);  // The iFrame is removed 2 seconds after print() is executed, which is enough for me, but you can play around with the value
          });
        }

        return true;
      }
    }
  };
});

在模板中，您可以这样标记打印按钮：

<a href="#" print-div=".css-selector-of-the-div-you-want-to-print">Print!</a>

就是这样，它应该可以工作。令人毛骨悚然的是，由于没有跨浏览器的方式来检测打印执行的结束，因此iFrame在一定的毫秒数后就被删除了，因此您估算了它运行需要多少时间。

您可能需要包括jQuery才能使其正常工作，我不确定，因为没有它我几乎永远无法工作。我添加了一些内联注释以使事情更清楚。我从此答案中使用了一些代码，这些代码使用弹出窗口来打印div内容（但在Angular.js之外）。也许您会更喜欢这种方法。

有没有一种从HTML页面打印div的Angular方法？

相关阅读

相关文章

相关问答

相关工具

相关文档