누눕's blog

html2canvas 와 jsPDF로 pdf 저장기능 만들기 본문

IT 기록/javaScript

html2canvas 와 jsPDF로 pdf 저장기능 만들기

누워서눕기 2020. 5. 20. 16:41

https://itinerant.tistory.com/51

 

[JavaScript] html2canvas 사용 방법

[JavaScript] html2canvas html2canvas : 웹(html)에서 화면을 캡쳐하는 기능. 실질적으로는 선택한 요소를 Canvas에 그린다. 하위 자식들까지 모두 canvas에 그린다. 예1) Body 안의 모든 요소를 Canvas에 그릴..

itinerant.tistory.com

CDN : <script src="html2canvas.hertzen.com/dist/html2canvas.js"></script>

 

기본 함수 : 

html2canvas(document.getElementById("content")).then(function(canvas) {

    함수 내용

});

 

옵션 추가할 때 : {}안에다 옵션 설정

html2canvas(document.getElementById("content"), {

            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight
}).then(function(canvas) {

    함수 내용

});

 

옵션 참조 : 

html2canvas.hertzen.com/configuration/

 

Options - html2canvas

Options Explore the different configuration options available for html2canvas

html2canvas.hertzen.com

이미지가 잘리지 않게 나오게 하고 싶을 때 : 

https://stackoverflow.com/questions/36213275/html2canvas-does-not-render-full-div-only-what-is-visible-on-screen#comment108737776_59841384

 

HTML2Canvas does not render full div, only what is visible on screen?

I'm trying to use HTML2Canvas to render the contents of a div. Here is the code: var htmlSource = $('#potenzial-page')[0]; $('#btn').on("click", function() { html2canvas(htmlSource).

stackoverflow.com

 

예제 코드 (캡처가 잘리지 않게 pdf 저장) : 

참조 :

https://devheedoo.github.io/posts/save-html-to-pdf/

 

Save HTML to PDF - Heedo's Dev Blog

프로젝트에서 HTML 화면을 PDF로 출력해야하는 경우가 생겼다. iText 라이브러리의 경우 html을 pdf로 변환해주지만 CSS 적용에 한계가 있었다. 그래서 두 가지 라이브러리를 이용해 현재 화면을 이미�

devheedoo.github.io

https://devlink.tistory.com/242

 

자바스크립트에서 pdf 출력하기 (html2canvas + jspdf)

https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html jsPDF - Documentation The identity matrix (equivalent to new Matrix(1, 0, 0, 1, 0, 0)). Starts a new pdf form object, which means that all conse..

devlink.tistory.com

 

저작자표시

'IT 기록 > javaScript' 카테고리의 다른 글

자바스크립트 Object.keys() 함수  (0) 2020.07.03
자바스크립트 pdf로 저장  (0) 2020.05.20
자바스크립트 날짜  (0) 2020.05.19
자바스크립트(javaScript) 삽입 위치  (0) 2020.03.30
'IT 기록/javaScript' Related Articles more