打印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的內容

回答

相關問題