打印HTML DIV的内容

时间:2016-08-02 04:43:57

标签: html angularjs

我想要打印html div的内容,目前我正在使用此代码。

<div id="content">
</div>

var printContents = document.getElementById("content").innerHTML;
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;

打印工作正常。但之后我的其他功能都停止响应。我正在使用angular.js。

任何想法?

2 个答案:

答案 0 :(得分:3)

以下是我找到的答案

HTML和JS CODE

 <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>


$scope.printDiv = function(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var popupWin = window.open('', '_blank', 'width=300,height=300');
  popupWin.document.open();
  popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
  popupWin.document.close();
} 

我是从here

找到的

答案 1 :(得分:0)

如果你正在使用angularjs 使用

<div ng-bind-html="content |trustAs">
</div>
控制器中的

$scope.content='<div> Your html</div>';  

app.filter('trustAs', ['$sce', 
        function($sce) {
            return function (input, type) {
                if (typeof input === "string") {
                    return $sce.trustAs(type || 'html', input);
                }
                console.log("trustAs filter. Error. input isn't a string");
                return "";
            };
        }
    ]);

Working fiddle

您还可以使用ng-sanitize获得相同的结果https://stackoverflow.com/a/25679834/3769965