打印HTML DIV的内容

我想打印一个html div的内容，并且当前我正在使用此代码。打印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。

有什么想法吗？

来源

2016-08-02 denny

我不这么认为。用户将其标记为解决方案，这可能意味着其他一些用户可能无法使用相同的关键字找到答案。 –

这是答案我发现

HTML和JS代码

<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

来源

2016-08-02 04:48:51

非常感谢@技工！ – denny

上述解决方案工作，但像字体颜色和div背景颜色的样式不会被打印为屏幕上！有什么建议么？ –

，如果你使用的是在您的控制器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

来源

2016-08-02 04:47:58

你确定这会打印div吗？ –

您需要使用trust作为过滤器或ng-sanitize来获得结果。更新了答案 –

打印HTML DIV的内容

回答

相关问题