자바스크립트(javascript)로 pdf 파일 만들기

[javascript] 자바스크립트(javascript)로 pdf 파일 만들기

---

 Client쪽에서 pdf파일를 만들어야 할때가 있습니다. 

물론, 서버쪽에서도 PDF파일 만들 필요가 있습니다. 

그건 차후에 생각해 보고, 

Client 쪽에서 만들기 위해서

pdfmake를 사용해서 만들어 보겠습니다.

공식사이트 : http://pdfmake.org/index.html#/

1. pdf를 만들기 위한 js 파일 가져오기

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- jquey 파일 -->

<script src="js/pdfmake/pdfmake.min.js"></script>

<!-- pdf를 만등주기 위한 pdfmake js 파일 -->

<script src="js/pdfmake/vfs_fonts.js"></script>

<!-- 한글의 깨짐을 해결하기 위한 js 파일 -->

pdfmake.min.js 파일의 경우 최신 버전을 직접 다운 받셔도 됩니다.

다만, vfs_fonts.js파일의 경우 한글의 깨짐 해결 놓은 상황이니 이점 참고에서 사용하실 분들은 스스로 결정하시면 됩니다.

2. pdf 파일 만들어 보기 

아래의 주석 부분으로 보시면서 흐름을 파악하시면, 좋습니다.

또한, 공식 페이지에 가시면 table , column 등 여러개가 있습니다.

참고하시면 좋을 것 같습니다.

<button id="pdfmake">pdf_file 만들기</button> //pdf 파일을 만들기 위한 이벤트를 위한 버튼

<script>

$("#pdfmake").click(function () { //버튼 id pdfmake 발생시 행동할 이벤트

/* documentDefinition : pdf파일에 들어갈 내용 및 여러가지를 정의 */

var documentDefinition = {

//content : pdf의 내용을 정의

content: [

{

text: 'First paragraph'

}, // 스타일 적용 없이 그냥 출력

{

text: 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',

bold: true

}, // 텍스트에 bold 주기

{

text: '가나다라마바사아자타카타파하',

style: 'style_test'

}, // style 부분에 정의된 style_test 적용해보기 및 한글 꺠짐 테스트

{

style: 'tableExample',

table: {

widths: [100, '*', 200, '*'],

body: [

['width=100', 'star-sized', 'width=200', 'star-sized'],

['fixed-width cells have exactly the specified width', {

text: 'nothing interesting here',

italics: true,

color: 'gray'

}, {

text: 'nothing interesting here',

italics: true,

color: 'gray'

}, {

text: 'nothing interesting here',

italics: true,

color: 'gray'

}]

]

}

}//테이블 그리기

],

//하단의 현재페이지 / 페이지 수 넣기

footer: function (currentPage, pageCount) {

return {

margin: 10,

columns: [{

fontSize: 9,

text: [{

text: '--------------------------------------------------------------------------' +

'\n',

margin: [0, 20]

},

{

text: '' + currentPage.toString() + ' of ' +

pageCount,

}

],

alignment: 'center'

}]

};

},

//필요한 스타일 정의하기

styles: {

style_test: {

fontSize: 18,

bold: true,

margin: [0, 0, 0, 0],

alignment: 'center'

},

tableExample: {

margin: [0, 5, 0, 15]

}

},

// 페이지 크기 용지의 크기 사이즈 넣기 또는 특정 사이즈 넣기 { width: number, height: number }

pageSize: 'A4',

/* 페이지 방향 portrait : 가로 , landscape : 세로 */

pageOrientation: 'portrait',

};

var pdf_name = 'pdf파일 만들기.pdf'; // pdf 만들 파일의 이름

pdfMake.createPdf(documentDefinition).download(pdf_name);

})

</script>

3. 결과화면

---

---

도움이 되셨다면, 구독과 좋아요.... 아니아니 ...

공감 버튼 꾸욱 눌러주세요 ~~