HTML3

• 

  HTML to PDF 변환기 (3) 이번 포스팅에서는 지난 시간에 개발한 HtmlToPdfConverter 를 사용하는 caller 쪽 코드를 살펴보려고 한다. 변환하고자 하는 html template 나는 변환하고자 하는 html template 코드를 Vue 컴포넌트로 작성하였다. 아래는 InvoiceBill.vue 의 전체 코드이다. template 코드 가장 바깥을 감싸는 div 태그에 ref="pdfArea" 를 작성하였다. 해당 Vue 컴포넌트를 임포트 할 소스에서 pdfArea 의 ref 명으로 PDF 변환 대상 HTML element 를 가져올 것이다. 그리고, 아래는 샘플 코드이기 때문에 테이블 본문의 th 나 td 의 내용을 고정 텍스트로 작성하였지만, {{item.title}} 의 h1 태그 내용과 같이 props da.. Front-end 2023. 5. 21.

• 

  HTML to PDF 변환기 (2) 이번 포스팅에서는 지난 포스팅에 이어서 html2pdf 라이브러리를 사용하여 html array 를 pdf 로 변환하는 기능을 개발해보려고 한다. Vue.js 2버전의 기본 프로젝트 환경이 구성되어있음을 전제로 글을 작성하였다. html2pdf.js 라이브러리 설치 우선 html2pdf.js 라이브러리를 프로젝트에 설치하자 npm install --save html2pdf.js 설치가 완료되니 package.json 파일의 dependencyies 에 아래와 같이 "html2pdf.js": "^0.10.1" 가 추가된다. "dependencies": { "core-js": "^3.8.3", "element-ui": "^2.15.13", "html2pdf.js": "^0.10.1", "vue": "^2.6.. Front-end 2023. 5. 21.

• 

  HTML to PDF 변환기 (1) Front-End 개발 중 인쇄 기능이 필요하다면 어떻게 하실 건가요? 프론트엔드 개발 중에는 종종 웹 페이지를 인쇄할 수 있는 기능을 구현해야 할 때가 있습니다. 이번 글에서는 프론트엔드에서 인쇄 기능을 구현하는 여러 가지 방법을 소개하겠습니다. 기본적인 방법: window.print() 가장 간단한 방법은 JavaScript의 기본 내장 함수인 window.print()를 사용하는 것입니다. 이 함수를 호출하면 브라우저의 인쇄 대화상자가 열리고 사용자가 페이지를 인쇄할 수 있습니다. 다음은 window.print() 함수를 사용한 예시 코드입니다. function printPage() { window.print(); } 외부 라이브러리: jsPDF, Print.js 등 더욱 다양한 기능을 제공하기 위.. Front-end 2023. 5. 16.