html2pdf.js : HTML 페이지를 PDF 파일로 다운로드 하는 소스코드

 

> HTML 페이지 소스코드

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML to PDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="pdf-contents">
PDF에 들어가는 내용입니다.
</div>
</body>
</html>

 

 

> PDF 다운로드 자바스크립트 소스코드


const element = document.getElementById('pdf-contents');
const options = {
    margin: [10, 10, 10, 10],                     // top, right, bottom, left 마진 여백
    filename: 'PDF파일명',                        // PDF 파일 명
    pagebreak: { mode: 'avoid-all' },      // pagebreak 옵션
    image: { type: 'jpeg', quality: 2 },      // 이미지 퀄리티 (pdf 퀄리티)
    html2canvas: {                                   // html2canvas 옵션
        useCORS: true,                              // 영역 안에 로컬 이미지를 삽입 할 때 옵션 필요
        scrollY: 0,                                       // 스크롤 이슈 '0'으로 설정
        scale: 1,                                          // browsers device pixel ratio
        dpi: 300,
        letterRendering: true,
        allowTaint: false,                           // useCORS를 true로 설정 시 -> allowTaint를 false로 설정
    },
    jsPDF: { 
    orientation: 'landscape',                  // portrait : 세로, landscape : 가로
    unit: 'mm', 
    format: 'a3'                                        // 종이 크기 형식 a3, a4 ...
    },
};
html2pdf(element, options);

 

 

> 맞춤형 솔루션 제작

맞춤형 웹솔루션 전문 제작, 프로그램 제작, 맞춤형 홈페이지 제작, 온라인 제작 상담, 견적서 발행

https://www.kiwisoft.kr

 

https://www.kiwisoft.kr

 

www.kiwisoft.kr

 

 

<div> 태그 width:100%일 때 border 값 있을 경우 100% 초과해서 레이아웃이 깨지는 경우


div 태그에서 width:100%인 경우에 border값을 주게 되면 width가 100%를 넘어서면서 레이아웃이 깨져 문제가 생깁니다. 

border 값을 주더라도 기존 100% 너비를 유지하려면 아래와 같이 CSS를 적용하시면 됩니다.


HTML

<div id="example1"></div>


CSS

#example1 {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}




'프로그래밍 > CSS' 카테고리의 다른 글

버튼(button) 디자인 CSS 예제  (0) 2016.06.04



버튼(button) 디자인 CSS 예제


<style type="text/css">

.button1 

{

background: #5BB6FF;

border: none;

border-radius: 3px;

color: #ffffff;

display: block;

width: 100px;

height: 30px;

font: 13px "Gulim", "Dotum", Georgia, "Times New Roman", Times, serif;

margin: 0 0 0 0; 

padding: 1px 1px 1px 1px;

text-shadow: 0px 0px 0px 0px #e7e7e7; 

}

</STYLE>


<input type="button" value="버튼" class="button1">







HTML <div>태그를 웹브라우저 화면 중간에 정렬하는 간단한 소스입니다.


1. CSS 지정


#wrap{ 

margin:0 auto;

}


2. DIV 태그 


<div id="wrap" style="width:1000px;">내용</div>



margin:0 auto;를 사용하여 자동으로 화면 가운데에 위치하도록 지정할 수 있습니다.

주의할 점은 <div> 태그의 가로폭을 반드시 지정해주어야 합니다. 가로폭은 CSS또는 div태그에서 직접 지정하시면 됩니다.



'프로그래밍 > HTML' 카테고리의 다른 글

<div> 태그 height 100% 적용하기  (0) 2016.01.19
[HTML] 모바일웹 명함 기본 HTML 소스  (0) 2016.01.09

+ Recent posts