vue 화면 출력하는 라이브럴리

오늘은 vuejs에서 화면을 출력시킬때 사용할 수 있는 라이브러리를 소개해드립니다.
사용방법도 너무나 심플하네요. 

일단 공식 npm 주소는 아래와 같습니다.

https://www.npmjs.com/package/vue-html-to-paper

vue-html-to-paper

npm을 이용하셔서 인스톨을 하시고 난 후에 사용하는 방법은 

main.js에 
아래를 추가해 주세요. 

import VueHtmlToPaper from 'vue-html-to-paper';

const printOption ={
  name: '_blank',
  specs:[
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
    'https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css',
    'https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css',
    'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'
  ],
  timeout: 1000, // default timeout before the print window appears
  autoClose: true, // if false, the window will not close after printing
  windowTitle: window.document.title, // override the window title
}

Vue.use(VueHtmlToPaper, printOption);

위 처럼 global하게 옵션을 선언해서 사용하실수 있습니다.
제가 styles 를 따로 선언하고 진행한것은 제가 현재 프로젝트에 사용하고 있는 스타일을 프린트에 적용하기 위해서 이렇게 선언을 했습니다.