티스토리 뷰

Vuejs로 프로젝트를 여러개 수행중에 고객들의 요구사항은 항상 내 예상을 벗어나는 것들이 많다.

 

"이 정도는 쉽게 하실 수 있는게 아닌가요?"

라고 말하면서 요청하는 기능 중 이번에는 특정 영역만 인쇄할 수 있는 기능을 만드는 것!

 

브라우져에서 기본적으로 사용 가능한 인쇄 기능은 브라우져에서 출력되는 문서 전체를 인쇄하는 것이지만, 특정 영역만 출력하기 위해서는 자체적으로 기능을 제공하고 있지 않다. 그렇기 때문에 구현해야 하는데, 어떻게 구현해야 할 것인가?

 

이런 저런 방법을 다 동원해 보왔다. (역시나, 머리가 나쁘면 손발이 고생한다.)

스타일 승계 문제 때문에 새로운 창이나 팝업은 언감생심이고,

심지어, 특정 영역을 Canvas로 캡쳐를 찍어 이미지로 만들어 팝업에 출력 후, 인쇄하는 방법까지 진행했으나, 문제는 IE11...

 

나와 같은 기능을 개발하는데 고생하는 사람들이 없을까? 하여 검색하니, 역시나 좋은 방법을 도출한 분이 있었다.

 

https://milooy.wordpress.com/2017/03/28/javascript-print-page/

 

[Javascript]원하는 HTML 영역 프린트하기

상황: 페이지의 일부만 프린트하고 싶다! 구글링 하면 2가지 방법이 나온다. 근데 둘다 내 상황에는 문제점이 있었다. 팝업으로 DOM을 복사해 프린트: 편하긴 한데 css, js가 떨어짐 전체 돔, 프린트 영역 원하는 돔 따로 저장한다음에 프린트영역만 살리고 프린트 후 전체 돔 살림: 편하긴 한데 js 이벤트 바인딩이 떨어짐 아래와 같이 display…

milooy.wordpress.com

방법은 인쇄 대상이 되는 특정 영역의 HTML을 추출하여, 현재 출력되는 부분은 display를 none으로 설정하고, 추출한 HTML을 출력하고 나서 인쇄를 실행하는 것이다. 물론 바로 원래대로 돌려놓는 방법인데, 위 방법은 다 좋지만, IE11에서 실행이 되지 않더라.

 

그래서 아래와 같이 소스를 변경하였다.

  printElement(elementRef) {
    let app = document.getElementById('app')
    const printContents = elementRef.innerHTML
    let printDiv = document.createElement('DIV')

    document.body.appendChild(printDiv)
    printDiv.innerHTML = printContents
    app.style.display = 'none'
    window.print()

    app.style.display = 'block'
    printDiv.style.display = 'none'
    printDiv.innerHTML = ''
  }

IE11에서는 Body영역을 인쇄 영역으로 잡기 때문에 Body에 추가하는 방법으로 변경하였다. 저 함수에, ref로 연결된 부분을 넘기면 된다.

 

댓글
댓글쓰기 폼