본문바로가기

Plugin

Reporting

Basic

Reporting 기능은 Javascript 기반의 클라이언트 사이드 PDF 출력 라이브러리인 PDFMake 를 활용하여 제공합니다.

디렉터리 구조

Reporting 라이브러리 전체 구성은 아래와 같습니다.

* 라이브러리 내 reporting 폴더 위치

AlopexUI_library
	┗━ script
		┗━ src
		   ┗━━ reporting (folder)


* reporting 폴더 구조

reporting (folder)
	┣━ pdfmake.min.js (file)
	┣━ vfs_fonts.js (file)
	┗━ alopex-reporting.min.js (file)

적용

Reporting 라이브러리 적용 방법입니다.

Reporting 구현 시

<script src="{path}/script/lib/alopex/src/reporting/pdfmake.min.js"></script>
<script src="{path}/script/lib/alopex/src/reporting/vfs_fonts.js"></script> <!--폰트설정(선택)-->
<script src="{path}/script/lib/alopex/src/reporting/alopex-reporting.min.js"></script>
Functions

$(element).export(options, exportFormat, exportType)

options {JSON} Required

  • pageSize {string} Optional
    • 출력 페이지 사이즈를 지정합니다.
      • 'A0'| 'A1'| 'A2'| 'A3'| 'A4'| 'A5'| 'A6'| 'A7'| 'A8'| 'A9'| 'A10'
      • 'B0'| 'B1'| 'B2'| 'B3'| 'B4'| 'B5'| 'B6'| 'B7'| 'B8'| 'B9'| 'B10'
      • 'C0'| 'C1'| 'C2'| 'C3'| 'C4'| 'C5'| 'C6'| 'C7'| 'C8'| 'C9'| 'C10'
  • pageOrientation {String} Optional
    • 'portrait'(default) | 'landscape'
      • 페이지 방향을 지정합니다.
  • pageMargins {Array} Optional
    • [left, top, right, bottom] | [horizontal, vertical]
      • 페이지 여백을 지정합니다.
  • watermarkImage {JSON} Optional
    • image {string}
      • 워터마크 이미지 url
    • type {string}
      • "tile" | "center"
      • 워터마크 이미지 배치 옵션
    • tilesgap {Number}
      • 워터마크 이미지 간격
    • rotate {Number}
      • 워터마크 이미지 회전 각도
    • opacity {Number}
      • 워터마크 이미지 투명도
    • grayscale {boolean}
      • 워터마크 이미지 흑백 효과 여부
  • alopexGrid {Object} Optional
    • AlopexGrid 와 관련된 출력 옵션을 지정합니다.
      • exportDragDropColumn {boolean} Optional
        • true(default) | false
        • AlopexGrid 출력 시, dragDrop 컬럼 출력 여부를 지정합니다.
      • exportSelectorColumn {boolean} Optional
        • true(default) | false
        • AlopexGrid 출력 시, selector 컬럼 출력 여부를 지정합니다.
      • exportNumberingColumn {boolean} Optional
        • true(default) | false
        • AlopexGrid 출력 시, numbering 컬럼 출력 여부를 지정합니다.
  • header {JSON | function}
    • {JSON}
      • text {String}
      • alignment {String}
        • "left" | "center" | "right"
      • fontSize {Number}
    • {Function}
    • {boolean}
  • footer {JSON | function | boolean}
    • {JSON}
      • text {String}
      • alignment {String}
        • "left" | "center" | "right"
      • fontSize {Number}
    • {Function}
    • {boolean}
      • true
        • true 설정 시, 페이지를 하단에 표시합니다. ex) 1 / 4
  • defaultStyle {JSON} Optional
    • 기본 출력 스타일을 정의합니다.
      • font {String}
        • 기본 출력 폰트 이름을 지정합니다.
  • downloadCallback
    • {function}
      • PDF 다운로드 완료 후 콜백함수를 지정합니다.
      • exportType 이 'download' 일 때 유효합니다.
  • window
    • {window}
      • PDF 가 오픈될 윈도우 객체를 지정합니다.
      • exportType 이 'open', 'print' 일 때 유효합니다.
  • useVerticalAlign
    • {boolean}
      • default : false
      • 테이블 셀 내의 수직 정렬 기능을 사용할 때 true로 설정합니다.
  • repeatTableHeader
    • {boolean}
      • default : false
      • 테이블이 여러페이지에 걸쳐있을 경우 각페이지의 테이블 시작부분에 테이블헤더 부분을 반복 출력한다.

exportType {String} Optional

  • exportType {String} Optional
    • 'open'(default) | 'download' | 'print'
      • 'open'
        • 생성된 pdf 파일을 오픈합니다.
        • 특정 브라우저에서는 PDF 미리보기를 지원하지 않습니다. 참고
      • 'download'
        • 생성된 pdf 파일을 다운로드합니다.
      • 'print'
        • 생성된 pdf 파일을 오픈 후 인쇄합니다.
        • 특정 브라우저에서는 PDF 미리보기를 지원하지 않습니다. 참고

exportFormat {String} Optional

  • 'pdf'(default)
    • 출력 포맷을 지정합니다.
    • 현재는 pdf 출력만을 제공합니다.
$(element).export({
	pageSize: 'A4',
	pageOrientation: 'landscape',
	watermarkImage: {
		url: "image/watermark.png",
		type: "tile",
		rotate: 30,
		opacity: 0.3,
		grayscale: true
	},
	alopexGrid:{
		exportDragDropColumn: true,
		exportSelectorColumn: true,
		exportNumberingColumn: true
	},
	header: function(currentPage, pageCount) {
		return { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' };
	},
	footer: true,
	defaultStyle: {
		font: 'malgun'
	}
}, 'download')

$a.setup('reporting', options)

$a.setup 을 통해서 reporting 기능을 공통 설정 하실 수 있습니다.

  • parameter
    • option {object}
      • $a.setup 을 통해 아래의 옵션들을 공통 설정 가능합니다.
        • pdfFonts {object}
        • alopexGrid {object}
$a.setup('reporting', {
	pdfFonts : {
		'yourFontName': {
			normal: 'fontFile.ttf',
			bold: 'fontFile2.ttf',
			italics: 'fontFile3.ttf',
			bolditalics: 'fontFile4.ttf'
		},
		'anotherFontName': {
			(...)
		}
	},
	alopexGrid:{
		exportDragDropColumn: false,
		exportSelectorColumn: false,
		exportNumberingColumn: false
	}
})
Demo

아래 데모를 통해 여러 가지 출력 템플릿을 테스트해보실 수 있습니다.
[Demo] 바로가기 [Template] 다운로드

Style Guide

HTML 엘리먼트를 파싱하여 PDF 출력 가능한 구조로 변환하는 과정에서 엘리먼트의 스타일이 반영되지 않을 수도 있습니다. 아래의 스타일 가이드를 참고하여 CSS를 작성하시면 보여지는 화면과 유사한 출력 결과물을 얻으실 수 있습니다.

Border

  • Div/Span 등의 엘리먼트에 적용된 Border 스타일은 반영되지 않습니다.
  • Border 스타일을 반영하고자 할 경우에는, Table 태그를 활용하여 엘리먼트를 구성해주세요.

Fonts

기본 폰트 설정

기본 출력 폰트는 export API 의 defaultStyle 옵션을 통해 지정할 수 있습니다.

$(element).export({
	defaultStyle : {
		font: 'malgun',
		fontSize: 15,
		color: red
	}
})

Custom Fonts 설정

  • AlopexUI 라이브러리 ZIP 안에 포함되는 vfs_fonts.js 는 Roboto, Malgun(맑은 고딕)만 제공합니다.
  • 그 외의 폰트로 출력하고자 하는 경우에는 원하는 폰트를 포함하는 vfs_fonts.js 파일을 생성하여 사용하셔야 합니다.

    • (1) pdfMake 소스 다운로드
    • (2) examples/fonts 하위 디렉터리에 원하는 폰트 파일을 위치
    • (3) gulp 명령어(gulp buildFonts)를 활용하여 vfs_fonts.js 파일 생성
    • 자세한 내용은 이 링크 를 참고해주세요.
  • 생성한 vfs_fonts.js 로 교체한 후, 아래처럼 폰트를 추가합니다.

// Custom Fonts 추가
$a.setup('reporting', {
	pdfFonts : {
		'yourFontName': {
			normal: 'fontFile.ttf',
			bold: 'fontFile2.ttf',
			italics: 'fontFile3.ttf',
			bolditalics: 'fontFile4.ttf'
		},
		'anotherFontName': {
			(...)
		}
	}
})

Margin/Padding

  • PDFMake 라이브러리는 Margin 옵션만을 제공하고 있습니다.
  • Padding 스타일은 무시되므로, Margin 스타일을 통해 여백(간격)을 설정할 수 있습니다.

Page break

  • data-pagebreak="true"
    • HTML테그에 data-pagebreak="true" 속성을 추가하면 해당위치에서 page 넘김 처리가 됩니다.
    • HTML문서상이 아닌 export API를 실행하여 생성된 PDF문서 상에서 page넘김 처리가 일어나게 됩니다.
    • document루트에 사용된 <span> 테그나 <label> 테그에 사용하시길 권장드립니다.
<span data-pagebreak="true" ></span>
<h5>Table title</h5>
<table class="Table">
	<colgroup>
		<col style="width:25%"/>
		<col style="width:25%"/>
		<col style="width:25%"/>
		<col style="width:25%"/>
	</colgroup>
	<tbody>
		<tr>
		<td>Sample#1</td>
		<td>Sample#2</td>
		<td>Sample#3</td>
		<td>Sample#4</td>
		</tr>
	</tbody>
</table>

Table

  • column 너비
    • column 너비를 지정하고자 하는 경우 colgroup 을 통해 지정하시면 됩니다.
    • '%' 단위를 사용하시면, 출력 용지의 너비에 맞게 출력됩니다.
<table class="Table">
	<colgroup>
		<col style="width:25%"/>
		<col style="width:25%"/>
		<col style="width:25%"/>
		<col style="width:25%"/>
	</colgroup>
	<tbody>
		<tr>
		<td>Sample#1</td>
		<td>Sample#2</td>
		<td>Sample#3</td>
		<td>Sample#4</td>
		</tr>
	</tbody>
</table>
  • td 높이
    • td 높이를 인라인 스타일로 지정해도 반영되지 않는 제약이 있습니다.
    • 현재로서는 td 높이를 지정하고 싶은 경우에는 Margin 스타일을 통해 여백을 주는 방법을 사용하셔야 합니다.
  • vertical Alignment
    • 테이블 셀 안에서의 수직 정렬을 하고자 하는 경우에는 td 안의 컨텐츠를 div/span 태그 감싸주어야 합니다.
    • 또한 useVerticalAlign 옵션을 true 로 설정해주어야 됩니다.
Browser Support

브라우저에 따라 일부 기능이 작동하지 않을 수 있습니다.

Browser open download print
Chrome O O O
Edge X O X
Internet Explorer 11 X O X
Internet Explorer 10 X O X
Internet Explorer 9 X X X
FireFox O O O
Opera X O X