angularJS 단일 페이지 응용 프로그램에서 javascript를 사용하여 div 인쇄

angularJS를 사용하는 단일 페이지 웹 응용 프로그램이 있습니다. 특정 페이지의 div를 인쇄해야합니다.angularJS 단일 페이지 응용 프로그램에서 javascript를 사용하여 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> 
    <div> 
    Do not print 
    </div> 
    <div id="printable"> 
    Print this div 
    </div> 
    <button ng-click="printDiv('printableArea');">Print Div</button> 
</div>

컨트롤러는 스크립트 다음있다

페이지는 몇 사업부를 포함 (print.html) : 나는 다음과 같은 시도 문제. SPA이므로 전체 응용 프로그램의 본문이 document.body.innerHTML = originalContents;으로 바뀝니다. 따라서 페이지를 새로 고침하거나 인쇄 버튼을 다시 클릭하면 페이지의 전체 내용이 지워집니다.

출처

2014-03-05 Priyatam Roy

피들을 포함하십시오. – Quinn

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

출처

2014-03-05 05:49:46

쿨, 작동 : –

모든'$ http' 요청은이 후에 브레이크를 풉니 다. :(또한 페이지를 새로 고침 할 수 없습니다 ... 새 탭 작업에만 URL 복사 ... 이유를 이해할 수 없습니다. .. –

여기에 같은 모든 $ http 요청 브레이크하지만 새로운 창을 닫을 때 크롬과 함께 발생합니다 .Firefox 또는 IE는 잘 작동 –

두 가지 조건부 기능이 필요합니다. 하나는 Chrome 용이고 나머지 하나는 나머지 브라우저 용입니다. 이제 라이브러리를 사용할 수 있습니다

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

출처

2014-07-09 20:51:16

왜'onbeforeunload'와'originalContents'가 있습니까? 또한'popupWin.document.write' 줄에''태그가 없습니다. – Trisped

아주 좋은, 그냥 사용하지 않는 변수 감사합니다 :'originalContents' –

이는 크롬과 파이어 폭스에서 나를 위해 일한 것입니다 angular-print

출처

2015-09-04 07:23:53 TMichel

이 라이브러리는 유동적입니다. 일부 문제가 해결 될 때까지는 프로덕션에서 사용하는 것에주의해야합니다. –

@ G.Mart 분명히 저자는 [ 주요 릴리즈] (https://github.com/samwiseduzer/angularPrint/issues/7#issuecomment-163067195) 이번 주말 브라우저 간 호환성 문제를 해결하기 위해 – TMichel

저자로부터 3 일 전 : "예, 정말이에요. 이번 주말 크롬, 모질라 및 사파리를 지원하는 새 버전을 출시 할 예정입니다 .Edge는 대부분 지원되지만 버그 또는 two.chrome, mozilla 및 safari가있을 수 있습니다. 대부분 지원되지만 버그 나 2 가지가있을 수 있습니다. " –

라고! 이렇게하면 작은 인쇄 창이 열리고 인쇄물을 클릭하면 자동으로 닫힙니다. 나는이 방법을 수행

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();

출처

2016-06-28 19:38:10 tyborg

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

출처

2016-08-02 06:50:34 Azhar

-2

나는이 훨씬 큰 코드를 작성의 필요가 있다고 생각하지 않습니다.

나는 방형 인쇄기 패키지를 설치 했으므로 모두 설치해야합니다.

그냥 모듈에 주입하면 모든 사용 사전 내장 인쇄 지시를 & 재미가 인쇄하지 않으려면 당신은 또한 일부 사업부를 숨길 수 있다는 것입니다 갈 설정하고

http://angular-js.in/angularprint/

광산이 아주 효과적입니다.

출처

2017-06-30 12:43:05

이 질문에 대한 답을 제공하지 않습니다. 충분한 [평판] (https://stackoverflow.com/help/whats-reputation)이 있으면 [모든 게시물에 주석 달기] (https://stackoverflow.com/help/privileges/comment) 할 수 있습니다. 대신 [질문자의 설명이 필요하지 않은 답변]을 제공하십시오 (https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- i-do- 대신). – GrumpyCrouton

조언을 주셔서 감사합니다,하지만 나는 대답이 훨씬 정확하다고 생각합니다. 그리고 그것은 100 % 작동합니다. –

이미 기본적으로 귀하의 답변과 동일한 답변이 있으므로 귀하는이 스레드에 새로운 내용을 추가하지 않습니다. 비록 그것이 외부의 source_에 대한 링크 일 뿐이므로, 다른 답변도 무효라고 말할 것입니다. 링크가 당신의 대답을 망가 뜨리고 그들의 대답이 모두 끊어지면 당신의 대답은 링크이기 때문입니다. – GrumpyCrouton

angularJS 단일 페이지 응용 프로그램에서 javascript를 사용하여 div 인쇄

답변

관련 문제