Question

我有一个专门用于打印的指令。它以模态弹出窗口打开，可以立即打印出来。

我正在使用可以打印div的jquery插件。

它似乎应该像这个一样简单

$($element).printArea();或$(element).printArea();它有效......有点......我用{{stuff}}

获得指令的未编译版本

我尝试将$(element).printArea();放在指令和控制器中，结果相同......

任何帮助将不胜感激。谢谢！

Answer 1

您描述它的方式，您应该将一个准备好的html字符串传递给print方法，创建一个iframe并打印出来。

一个例子：

.controller('ModalCtrl', function ($scope, $modal, $log) {
  $scope.open = function (yourdataobject) {
    $scope.items = yourdataobject;

    var modalInstance = $modal.open({
      template: '<div id="printme"><div class="modal-header">' +
            '<h3 class="modal-title">{{items.name + " " + items.surname }}</h3>' +
        '</div>' +
        '<div class="modal-body">' +
            '<ul class="list-group">' +
               '<li class="list-group-item">' +
                   {{ items.whatever }}' +
                '</li>' +
            '</ul>' +
        '</div></div>' +
        '<div class="modal-footer">' +
            '<a class="btn btn-primary" href="#" print-div="#printme"><span class="glyphicon glyphicon-print"></span> Print</a>' +
            '<button class="btn btn-primary" ng-click="ok()">Close</button>' +
        '</div>',
      controller: ModalInstanceCtrl,
      size: '500',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

现在这将使用任何数据渲染你的模态，你需要指令来进行打印：

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

          var mywindow = window.frames["printf"];
          mywindow.document.write('<html><head><title>Put a title if you want</title><style>@page {margin: 25mm 0mm 25mm 5mm;font-size:16pt;}</style>' +
                        '</head><body style="font-size:15pt !important;"><div>' +
                        data +
                        '</div></body></html>');

          $(mywindow.document).ready(function(){
            mywindow.print();
            setTimeout(function(){
              $('iframe#printf').remove();
            },
            2000);
          });
        }

        return true;
      }
    }
  };
});

这是我正在使用的一些修改后的代码并知道它有效，但我可能会遗漏一些内容，所以请告诉我。

Angular JS打印div

1 个答案: