window.print 함수를 이용해서 보고서 프린트 구현을 할려고 하는데 질문이 있습니다ㅠㅠ

Question

안녕하세요. 주니어 개발자입니다.vue.js 사용 중이구여현재 웹페이지 기능 구현중에 print함수를 이용해서, 특정영역을 보고서로 출력하는 구현을 하는 중인데window.open으로 창이랑은 떠지는데 그 부분에 있는 css가 적용이 안되어서 도움을 구합니다ㅠㅅㅠ printReport(){ // const content = this.$el.querySelector('.report_modal_drawing'); const content = document.querySelector('.content'); const printWindow = window.open('', '_blank','width=900,height=800'); printWindow.document.write( ''+ ''+ // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + // '' + '' + ''+ ''+ '

' + content.innerHTML + '

'+ ''+ ''); printWindow.document.close(); printWindow.focus(); setTimeout(() => { printWindow.print() printWindow.close() }, 100); },경로를 하나하나 다 확인을 했는데도 css가 적용이 안되는 중입니다,, ㅠㅠ 도움 부탁 드립니다 ㅠㅠㅠ

Clickin · Answer

문제의 근본적인 원인은 원래 웹킷계열 웹브라우저는 출력 시 최적화를 위해 print 전용 css 미디어쿼리를 사용합니다.아마도 백그라운드 컬러 같은 게 날아가는 상황일 텐데 -webkit-print-color-adjust: exact; print-color-adjust: exact;설정을 전역으로 주고 한번 테스트해보세요

window.print 함수를 이용해서 보고서 프린트 구현을 할려고 하는데 질문이 있습니다ㅠㅠ

1개의 답변

Q&A 목록