안녕하세요. 웹페이지 구현 중에 특정 영역을 print 해야 하는 기능을 구현 중에 어려움이 있어서 질문 드립니다.

Question

안녕하세요. vue사용 중인 주니어 개발자입니다. 다름이 아니라, 현재 웹페이지 구현 중에 모달 창을 띄운 후 그 화면에 있는 특정 영역을 print를 하는 기능을 구현을 하고 있는 중에 문제가 생겨서 질문을 드리고자 글을 남깁니다.위 캡쳐 화면을 보시는 것과 같이 모달 창이 띄워 지고 캡쳐 화면에는 안나왔지만 상단에 있는 print 버튼을 눌렀을 때, window.open이 열리고 print() 화면이 열리면서 캡쳐 화면에 있는 특정 영역과 내용들이 나와야 하는데, 아래 사진처럼이런 식으로 css가 다 깨져서 나오면서 맨 위 캡쳐 화면에는 있는 내용들이 img빼고는 text들이 나오지 않고 있는 중입니다. printReport(){ 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); },제 코드는 이렇게 되어 있습니다만, 처음엔 scss가 적용이 안되어서 css폴더에 rpt_text.css에 .class명 말고 div로 배경색을 넣고 해보니 적용이 된 것은 확인했었습니다. 계속해서 scss가 안되길래 글을 올려보니 scss파일은 브라우저에서 읽지를 못하니, scss파일을 컴파일 한 후 css로 파일을 만든 후에 링크 태그에 적용을 해보라고 하셔서 test.css파일을 만들어 print할 특정 영역에 있는 div에 class명을 준 후 적용을 해보았는데도 똑같은 문제 화면으로 나오고 있는데 그 와중에 img빼고 textarea,input에 있는 text들 까지 나오지 않다는 것을 발견했습니다.. window.open(),print() 사용법이 잘못된 것일까요? 아님, 다른 방법이 있을까요,,? 계속해서 찾아보고, 알아보고, 적용을 해보았지만 똑같은 상황이 반복되고 있습니다.. 구현 중인 웹페이지들의 css는 모두 scss로 사용을 하고 있구여, 디렉토리는 frontend -> public -> scss->***.scss에 있고, modal.vue파일은 frontend -> src -> components->modal->modal.vue이렇게 있습니다. 참고로, scss가 파일을 윈도우 주소창에 localhost:**/scss/test.scss 하니, 파일 안에 있는 모든 코드들이 나왔고, window.open()이 되면서 열린 창에 f12를 눌러서 요소를 보니 head부분에 있는 link부분에 있던 href에 마우스를 대보니, localhost:**/scss/test.scss로 나오기도 했습니다,, 도움 주시면 감사드리겠습니다 ㅠㅅㅠ,,아 그리고 scss파일을 컴파일 할 때 방법으로 찾아본 결과 sass가 있다고 해서 test로 style.css, style.scss를 css폴더에 같이 생성한 후에 터미널에서 npx sass --watch css/style.scss css/style.css 입력했지만 실행이 안되더라구여,,이렇게 생성 한 후터미널에 입력했지만,, reading이 안되다고 나오길래,, 몇 번이나 경로를 확인하고, 파일 명도 보았는데, 못 읽는다고 나와서 당황,,했습니다,,

-ChatGPT- · Answer

안녕하세요! 모달 창에서 특정 영역을 인쇄하는 기능을 구현하려고 하는데 문제가 발생하고 있는 것 같네요. 문제의 원인을 찾아보기 위해 몇 가지 확인해야 할 사항들이 있습니다.CSS 파일 경로 확인: printReport() 함수에서 HTML 문서에 CSS 파일을 추가하고 있는데, 경로가 올바른지 확인해야 합니다. 상대 경로가 올바른지, 혹은 절대 경로를 사용해야 하는지 다시 한번 확인해보세요. CSS 파일이 올바른 경로에 있는지 확인하는 가장 좋은 방법은 해당 경로를 브라우저에서 직접 열어보는 것입니다.CSS 로드 순서: CSS 파일을 로드하는 순서도 중요합니다. 만약 CSS 파일이 올바른 경로에 있고 로드되어야 할 위치에 있는데도 문제가 발생한다면, CSS 파일이 다른 스타일 규칙을 덮어쓰는 등의 충돌이 발생할 수 있습니다. CSS 파일을 로드하는 순서를 확인하고, 필요한 스타일이 올바르게 적용되도록 해야 합니다.내용이 올바르게 전달되었는지 확인: content.innerHTML을 사용하여 모달 창 내용을 가져오고 있습니다. 해당 내용이 정상적으로 가져와지는지 확인해보세요. console.log(content.innerHTML)을 사용하여 콘솔에 내용을 출력해보면 도움이 될 수 있습니다.스타일 적용 문제: 특정 요소들이 인쇄 시에 스타일이 적용되지 않는다면, 해당 요소들의 스타일 규칙이 인쇄에 적용되도록 CSS를 조정해야 할 수도 있습니다. 예를 들어, @media print 미디어 쿼리를 사용하여 인쇄 시에 적용될 스타일을 지정할 수 있습니다.위의 사항들을 확인해보시고, 문제의 원인을 찾을 수 있을 것입니다. 문제가 계속되면 추가 정보를 제공해주시면 더 도움을 드릴 수 있습니다!-ChatGpt 의 답변을 그대로 가져온 내용입니다.--도움이 되셨으면 좋겠습니다-

안녕하세요. 웹페이지 구현 중에 특정 영역을 print 해야 하는 기능을 구현 중에 어려움이 있어서 질문 드립니다.

1개의 답변

기술 목록