it-swarm.dev

Cetak div menggunakan javascript dalam aplikasi satu halaman angularJS

Saya punya satu aplikasi web halaman menggunakan angularJS. Saya perlu mencetak div halaman tertentu . Saya mencoba yang berikut ini:

Halaman ini berisi beberapa 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>

Kontroler memiliki skrip berikut:

$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;
}

Kode ini mencetak div yang diinginkan tetapi ada masalah. .__ pernyataan document.body.innerHTML = originalContents; menggantikan isi keseluruhan aplikasi karena SPA. Jadi ketika saya menyegarkan halaman atau mengklik tombol cetak lagi, seluruh konten halaman terhapus.

32
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();
} 
88
Anand Natarajan

Dibutuhkan dua fungsi kondisional: satu untuk Google Chrome, dan satu lagi untuk browser lainnya.

$scope.printDiv = function (divName) {

    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.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></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 + '</html>');
        popupWin.document.close();
    }
    popupWin.document.close();

    return true;
}
10
Amit Jadli

Anda sekarang dapat menggunakan perpustakaan bernama angular-print

7
TMichel

Saya melakukan ini:

$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

Inilah yang berhasil bagi saya di Chrome dan Firefox! Ini akan membuka jendela cetak kecil dan menutupnya secara otomatis setelah Anda mengklik cetak.

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

Oke saya mungkin punya beberapa pendekatan yang bahkan berbeda.

Saya sadar bahwa itu tidak cocok untuk semua orang tetapi seseorang yang tidak berguna mungkin menganggapnya berguna.

Bagi mereka yang tidak ingin membuka jendela baru, dan seperti saya, khawatir tentang gaya css inilah yang saya temukan:

Saya membungkus tampilan aplikasi saya ke dalam wadah tambahan, yang disembunyikan saat mencetak dan ada wadah tambahan untuk apa yang perlu dicetak yang ditampilkan saat sedang mencetak.

Contoh kerja di bawah ini:

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>
	

Perhatikan bahwa saya sadar bahwa ini bukan solusi yang elegan, dan memiliki beberapa kelemahan, tetapi juga memiliki beberapa kelebihan:

  • tidak perlu jendela sembulan
  • menjaga css tetap utuh
  • tidak menyimpan seluruh halaman Anda ke var (untuk alasan apa pun Anda tidak ingin melakukannya)

Nah, siapa pun yang membaca ini, selamat bersenang-senang, dan tetap koding :)

EDIT:

Jika sesuai dengan situasi Anda, Anda dapat menggunakan:

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

bukannya boolean sudut untuk memilih konten cetak dan non-cetak Anda

EDIT:

Mengubah css layar karena tampilan yang muncul: tidak ada yang rusak saat mencetak saat mencetak pertama kali setelah memuat halaman/menyegarkan.

visibilitas: pendekatan tersembunyi tampaknya berhasil sejauh ini.

0
Kamil Wężyk