2016-08-02 13 views
4

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を使用しています。

+0

からそれを発見しました。ユーザーはそれを解決策としてマークしました。他のユーザーが同じキーワードを使用して回答を見つけられない可能性があります。 –

答えて

2

に取得するにはNG-サニタイズを使用することができますここは 私は

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

+0

非常にありがとう@メカニック! – denny

+0

上記の解決策は機能しましたが、フォント色やdiv背景色などのスタイルは画面上に印刷されません!助言がありますか? –

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

はまた、同じ結果https://stackoverflow.com/a/25679834/3769965

+0

これはdivを印刷することは確かですか? –

+0

結果を取得するには、フィルタとしてtrustを使用するか、ng-sanitizeを使用する必要があります。回答を更新 –