打印 Angular 处理的 HTML

Question

我正在尝试打印使用 Angular 渲染的div。我以这个答案为起点https://stackoverflow.com/a/30765875/285190，打印功能非常简单

$scope.printIt = function(){
   var table = document.getElementById('printArea').innerHTML;
   var myWindow = $window.open('', '', 'width=800, height=600');
   myWindow.document.write(table);
   myWindow.print();
};

问题是innerHTML 包含如果没有执行ng-show ng-hide 指令会存在的所有项目。

有没有办法获取客户端看到的实际 HTML，即在 Angular 施展魔法之后？

Answer 1

请使用 $compile 服务将角度化的 HTML 转换为实际的 HTML。

$compile 的演示 https://stackoverflow.com/a/26660649/5317329

$scope.printIt = function () {
    angular.element('#tempHtml').html("");
    var table = document.getElementById('printArea').html();
    var compiledHTML = $compile(table)($scope);
        $timeout(function () {
            angular.element(document.querySelector('#tempHtml')).append(compiledHTML);//Please added <div id="tempHtml"></div> in page/View for temporary storage, Clear the div after print.
            console.log(angular.element('#tempHtml').html());
            var myWindow = $window.open('', '', 'width=800, height=600');
            myWindow.document.write(angular.element('#tempHtml').html());
            myWindow.print();
            angular.element('#tempHtml').html("");//Clearing the html
        }, 300);  // wait for a short while,Until all scope data is loaded If any complex one
};

希望对你有帮助