web-dev-qa-db-ja.com

angularJSシングルページアプリケーションでjavascriptを使用してdivを印刷します

AngularJSを使用した単一ページのWebアプリケーションがあります。特定のページのdivを印刷する必要があります。私は次を試しました：

このページにはいくつかのdiv（print.html）が含まれています

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

コントローラーには次のスクリプトがあります。

$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

このコードは目的のdivを出力しますが、問題があります。ステートメントdocument.body.innerHTML = originalContents;は、SPAであるため、アプリケーション全体の本体を置き換えます。そのため、ページを更新するか、もう一度印刷ボタンをクリックすると、ページのコンテンツ全体が消去されます。

javascriptangularjshtmlprintingsingle-page-application
33
Priyatam Roy
$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();
}
89
Anand Natarajan

2つの条件関数が必要です。1つはGoogle Chrome用で、もう1つは残りのブラウザー用です。

$scope.printDiv = function (divName) {

    var printContents = document.getElementById(divName).innerHTML; 

    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
        var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWin.window.focus();
        popupWin.document.write('<!DOCTYPE html><html><head>' +
            '<link rel="stylesheet" type="text/css" href="style.css" />' +
            '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></body></html>');
        popupWin.onbeforeunload = function (event) {
            popupWin.close();
            return '.\n';
        };
        popupWin.onabort = function (event) {
            popupWin.document.close();
            popupWin.close();
        }
    } else {
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        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();
    }
    popupWin.document.close();

    return true;
}
11
Amit Jadli

angular-print というライブラリを使用できるようになりました

7
TMichel

私はこのようにしました：

$scope.printDiv = function (div) {
  var docHead = document.head.outerHTML;
  var printContents = document.getElementById(div).outerHTML;
  var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";

  var newWin = window.open("", "_blank", winAttr);
  var writeDoc = newWin.document;
  writeDoc.open();
  writeDoc.write('<!doctype html><html>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
  writeDoc.close();
  newWin.focus();
}
1
Azhar

これがChromeとFirefoxで私にとってうまくいったことです！これにより、小さな印刷ウィンドウが開き、印刷をクリックすると自動的に閉じます。

var printContents = document.getElementById('div-id-selector').innerHTML;
            var popupWin = window.open('', '_blank', 'width=800,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no,top=50');
            popupWin.window.focus();
            popupWin.document.open();
            popupWin.document.write('<!DOCTYPE html><html><head><title>TITLE OF THE PRINT OUT</title>' 
                                    +'<link rel="stylesheet" type="text/css" href="app/directory/file.css" />' 
                                    +'</head><body onload="window.print(); window.close();"><div>' 
                                    + printContents + '</div></html>');
            popupWin.document.close();
0
tyborg

さて、私はいくつかの異なるアプローチを持っているかもしれません。

私はそれがすべての人に合っているわけではないことを知っていますが、それでも誰かがそれを役に立つと思うかもしれません。

新しいウィンドウを起動したくない人、そして私と同じように、CSSスタイルを心配している人のために、これが私が思いついたものです：

私はアプリのビューを追加のコンテナにラップしました。これは印刷時には隠されており、印刷時に表示される、印刷する必要のあるもののための追加のコンテナがあります。

以下の作業例：

var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
  
    $scope.people = [{
      "id" : "000",
      "name" : "alfred"
    },
    {
      "id" : "020",
      "name" : "robert"
    },
    {
      "id" : "200",
      "name" : "me"
    }];

    $scope.isPrinting = false;
                $scope.printElement = {};
                
                $scope.printDiv = function(e)
                {
                        console.log(e);
                        $scope.printElement = e;
                        
                        $scope.isPrinting = true;
      
      //does not seem to work without toimeouts
                        setTimeout(function(){
                                window.print();
                        },50);
                        
                        setTimeout(function(){
                                $scope.isPrinting = false;
                        },50);
                        
                        
                };
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

        <div ng-show="isPrinting">
                <p>Print me id: {{printElement.id}}</p>
    <p>Print me name: {{printElement.name}}</p>
        </div>
        
        <div ng-hide="isPrinting">
    <!-- your actual application code -->
    <div ng-repeat="person in people">
      <div ng-click="printDiv(person)">Print {{person.name}}</div>
    </div>
  </div>
  
  
</div>

これはエレガントなソリューションではなく、いくつかの欠点があることを認識していますが、いくつかの欠点もあります：

  • ポップアップウィンドウは必要ありません
  • cSSをそのまま保持します
  • ページ全体を変数に保存しません（何らかの理由でそれを行いたくない場合）

さて、あなたがこれを読んでいる人は誰でも、良い一日を過ごして、コーディングを続けてください:)

編集：

あなたの状況に合っていれば、実際に使用できます：

@media print  { .noprint  { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }

angularブール値の代わりに、印刷コンテンツと非印刷コンテンツを選択します

編集：

画面のCSSを変更しました。display：noneは、ページのロード/更新後の最初の印刷時にprintiingを中断するように見えるためです。

可視性：隠しアプローチはこれまでのところ機能しているようです。

0
Kamil Wężyk