vue에서 json 프린트 하기

vue 로 개발을 하던 도중 data grid를 출력할 일이 생겼다.

report 솔루션 라이센스도 없고 이걸 html로 노가다 해야 하나 고민하던 도중 괜찮은 (물론 MIT 라이센스의) util 하나를 발견했다.

 

이름은 Print.js (http://printjs.crabbly.com/) 

사이트를 방문해 보면 PDF, Html, Image, Json 프린팅을 지원한다고 되어 있다.

 

이중에서 Html 프린팅과 Json 프린팅 두가지를 시험해 보았다. 

 

출력 데이터는 아래와 같다. 

날짜	항목	이름	기수	금액	비고
2019-01-01	회비	홍길동	1기	30,000	2019 1월회비
2019-01-01	회비	김영일	3기	30,000	2019 1월회비
2019-01-02	회비	전도일	5기	30,000	2019 1월회비
2019-02-03	회비	박상도	6기	30,000	2019 1월회비

* 출력조건:

1. 수평정렬: 날짜,항목-가운데, 이름,기수,비고-왼쪽, 금액-오른쪽

2. 수직정렬: 중앙

3. 헤더는 페이지마다 반복

4. 컬럼은 한페이지에 나올것 ( 예. 비고가 잘려 다른 페이지에 출력되서는 안됨)

 

* 사용법:

npm i print-js --save

* print.vue

<template>
  <v-btn @click="print">print</v-btn>
</template>
<script>
import printJs from 'print-js'
export default {
  data: {
    return {
      items: [
        { date: '2019-01-01', name: '홍길동', item: '회비', group: '1기', amt: '30,000', remark: '2019 1월 회비'},
        { date: '2019-01-01', name: '김영일', item: '회비', gorup: '3기', amt: '30,000', remark: '2019 1월 회비'},
        { date: '2019-01-02', name: '전도일', item: '회비', gorup: '5기', amt: '30,000', remark: '2019 1월 회비'},
        { date: '2019-02-03', name: '박상도', item: '회비', gorup: '6기', amt: '30,000', remark: '2019 1월 회비'}
      ]
    }
  },
  method: {
    print () {
      printable: this.items,
      properties: [
        {field: 'date', displayName: '날짜'},
        {field: 'item', displayName: '항목'},
        {field: 'name', displayName: '이름'},
        {field: 'group', displayName: '기수'},
        {field: 'amt', displayName: '금액'},
        {field: 'remark', displayName: '비고'}
      ],
      type: 'json'
    }
  }
}
</script>

일단 위 조건 중 2,3,4 는 해결되어 깔끔하게 출력되는데 1번의 수평정렬은 아무리 찾아봐도 옵션이 없다. 

 

그래서 'type'을 html 로 바꾸고 json data를 html로 변환도 해봤는데 오히려 더 이상하게 나온다.. json type일때는 printJs가 어느정도 자체 css를 가지고 print에 필요한 html로 변환시키는 반면 html type일때는 사용자가 html을 만들때인쇄영역에서 필요한 모든걸 통제해야 하는 것 같다.

 

혹시나 싶어 data에서 필요한 부분에만 html code를 넣어본다.

<template>
  <v-btn @click="print">print</v-btn>
</template>
<script>
import printJs from 'print-js'
export default {
  data: {
    return {
      items: [
        { date: '<span style="display: block; text-align: center; vertical-align: middle;">2019-01-01</span>',
          name: '홍길동', item: '회비', group: '1기',
          amt: '<span style="display: block; text-align: right; vertical-align: middle;">30,000</span>',
          remark: '2019 1월 회비'},
        { date: '<span style="display: block; text-align: center; vertical-align: middle;">2019-01-01</span>',
          name: '김영일', item: '회비', gorup: '3기',
          amt: '<span style="display: block; text-align: right; vertical-align: middle;">30,000</span>',
          remark: '2019 1월 회비'},
        { date: '<span style="display: block; text-align: center; vertical-align: middle;">2019-01-02</span>',
          name: '전도일', item: '회비', gorup: '5기',
          amt: '<span style="display: block; text-align: right; vertical-align: middle;">30,000</span>',
          remark: '2019 1월 회비'},
        { date: '<span style="display: block; text-align: center; vertical-align: middle;">2019-02-03</span>',
          name: '박상도', item: '회비', gorup: '6기',
          amt: '<span style="display: block; text-align: right; vertical-align: middle;">30,000</span>',
          remark: '2019 1월 회비'}
      ]
    }
  },
  method: {
    print () {
      printable: this.items,
      properties: [
        {field: 'date', displayName: '날짜'},
        {field: 'item', displayName: '항목'},
        {field: 'name', displayName: '이름'},
        {field: 'group', displayName: '기수'},
        {field: 'amt', displayName: '금액'},
        {field: 'remark', displayName: '비고'}
      ],
      type: 'json'
    }
  }
}
</script>

잘 동작함. ^^ 

 

상용 report tool 처럼 강력하진 않지만 간단히 data grid 출력할 용도로는 훌륭한것 같음.