[Vue/Nuxt] print-js를 이용해 특정 페이지 프린트 기능 추가하기

Print-js 사용법

 

웹 페이지를 제작 중 특정 페이지의 경우 단순히 보는 것이 아닌

프린트 기능이 필요할 때가 있다.

 

물론 기본 적인 브라우저 내에서는 인쇄 기능을 제공 하나,

모든 페이지가 아닌 HTML에서도 특정 페이지를 프린트를 하고 싶을 경우 

Print-js를 연결해서 사용해보도록 하자

 

🖨️print-js

print-js는 자바스크립트 라이브러리로 웹상의 요소를 프린트를 도와준다.

간단하게 npm으로 설치가 가능해서 손쉽게 웹 애플리케이션에서 사용이 가능하다

 

설치방법

//npm
npm install print-js --save

//yarn
yarn add print-js

 

Import

설치한 라이브러리는 import 시켜서 사용이 가능하다.

import printJS from 'print-js'

 

Nuxt window is not defined 오류 해결방법

nuxt window is not defined

나의 경우 Nuxt프로젝트 구성으로 설치해서 사용 중인데

page/*.vue 페이지에 해당 코드를 넣어주면, window is not defined 오류가 난다.

 

가끔 Nuxt 프로젝트 내에 npm으로 설치한 라이브러리를 넣으면 해당 코드를 많이 만나게 되는데 

이런 경우 클라이언트쪽에서 내용이 다 랜더링 되지 않았는데 해당 객체에 접근하려 하기 때문에 나타난다.

 

이러한 문제가 나타나는 라이브러리는 plugin 쪽에 파일을 별도로 만들어서 

사용할 파일을 import 해준 뒤, 

nuxt.config 에 해당 플러그인 파일을 연결 한 뒤, ssr:false 속성을 추가해주면 정상 작동합니다.

 

/plugin/plugin.js

import Vue from 'vue'
import printJS from 'print-js'
Vue.use(printJS);

nuxt.config.js

module.exports = {
.
.
  plugins: [
    { src: '~plugins/plugin', ssr: false },
  ],
.
.
};

 

👩‍💻print-js 실전 사용

print-js의 상세한 옵션은 아래 홈페이지에서 확인이 가능하다.

printjs.crabbly.com/

 

print-js에서 내가 주로 사용할 것은 프린트 기술이다.

HTML 프린트 시 내가 프린팅을 원하는 element의 id값을 가져와서 연결해주면 해당 id에 해당하는

부분을 가져와서 print가 가능하다.

 

sample code

 <div id="printArea">
    <h1>프린트가 될 구역입니다.</h1>
 </div>

 <button type="button" onclick="printJS('printArea', 'html')">
    Print
 </button>

프린트 버튼 실행 화면

 

CSS 연결하기

print-js 사용법을 보면 configuration을 확인해보면 css

속성을 string 형태와,  array형태를 이용해서

단일 파일 혹은 멀티 파일을 연결해서 사용할 수 있다.

그다음 scanStyles 값을 false로 바꿔줘야지 내가 연결한 css가 정상 작동한다.

 

sample Code

<div id="printArea">
	<h1>프린트가 될 구역입니다.</h1>
</div>
<button type="button" onclick="printJS({
	printable:'printArea',
	type:'html',
	css: ['/print.css'],
	scanStyles : false
	})">Print
</button>

@media print{
    h1 {
        color:red;
        font-size:50px;
    }
}

css가 적용된 Print-js

해당 css속성에 추가한 css의 경우 statc폴더에 넣어줘야 인식이 가능했다.

(nuxt의 경우니 다른 프로젝트에서는 해당 프로젝트 위치 상 css를 찾는지를 확인해보길 바란다.)

 

 

이렇게 print-js를 이용하면 특정 구역의 프린트가 가능하니

전체 페이지 인쇄가 아니라 특정한 css를 적용한 구역을 프린트할 경우는 해당 라이브러리를 이용하면 된다.