javascript를 사용하여 div를 angular로 인쇄합니다.JS 단일 페이지 응용 프로그램
저는 angularJs를 사용한 한 페이지 웹 어플리케이션을 가지고 있습니다.특정 페이지의 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이기 때문에 어플리케이션 전체의 본문을 대체합니다.그래서 페이지를 새로 고치거나 인쇄 버튼을 다시 클릭하면 페이지의 내용이 모두 지워집니다.
$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();
}
두 가지 조건부 기능이 필요합니다. 하나는 Google Chrome용이고 다른 하나는 나머지 브라우저용입니다.
$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;
}
이제 angular-print라는 라이브러리를 사용할 수 있습니다.
이렇게 했습니다.
$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();
}
이게 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();
좋아요, 다른 접근법이 있을지도 몰라요
나는 그것이 모두에게 적합하지는 않을 것이라는 것을 알고 있지만 그럼에도 불구하고 누군가는 그것이 유용하다고 생각할 수 있다.
저처럼 새 창을 팝업하고 싶지 않은 분들과 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를 그대로 유지하다
- 페이지 전체를 var에 저장하지 않음(어떤 이유로든 원하지 않음)
음, 이 글을 읽고 있는 사람이 누구든 좋은 하루 보내시고 계속 코딩하세요:)
편집:
상황에 맞는 경우 실제로 다음을 사용할 수 있습니다.
@media print { .noprint { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }
각 부울 대신 인쇄 및 비인쇄 콘텐츠를 선택합니다.
편집:
페이지 로드/새로고침 후 처음 인쇄할 때 display:none이 인쇄를 중단하는 것처럼 보여 화면 css를 변경.
가시성: 아직까지는 숨겨진 접근법이 효과가 있는 것 같습니다.
이렇게 큰 코드를 쓸 필요는 없을 것 같아요.
방금 앵귤러 프린트의 바우어 패키지를 설치했는데, 모든 것이 준비되었습니다.
모듈에 삽입하기만 하면 모든 준비가 완료됩니다.사전 빌드된 인쇄 지침을 사용하여 인쇄를 원하지 않을 경우 일부 div를 숨길 수도 있습니다.
http://angular-js.in/angularprint/
내 거는 잘 돼.
언급URL : https://stackoverflow.com/questions/22189544/print-a-div-using-javascript-in-angularjs-single-page-application
'programing' 카테고리의 다른 글
| 기존 Spring Boot App에서 OpenApi 3.0 사양을 생성하는 방법 (0) | 2023.04.06 |
|---|---|
| jQuery.browser: Javascript Unaught TypeError (0) | 2023.04.01 |
| WordPress JSON API: ID별로 여러 게시물 검색 (0) | 2023.04.01 |
| react js에서 파일을 다운로드하는 방법 (0) | 2023.04.01 |
| 오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다. (0) | 2023.04.01 |