JavaScript 활용팁
2020.09.21 / 11:27

Print.js 웹에서 인쇄하는 데 도움이되는 작은 자바 스크립트 라이브러리

XMaLL관리자
추천 수 11

PDF 인쇄

Print.js는 주로 인터페이스를 벗어나지 않고 임베드를 사용하지 않고 앱 내에서 PDF 파일을 직접 인쇄 할 수 있도록 작성되었습니다. 사용자가 PDF 파일을 열거 나 다운로드 할 필요가없고 대신 인쇄 만하면되는 고유 한 상황의 경우.

예를 들어 이것이 유용한 시나리오 중 하나는 사용자가 서버 측에서 생성 된 보고서를 인쇄하도록 요청할 때입니다. 이러한 보고서는 PDF 파일로 다시 전송됩니다. 이러한 파일을 인쇄하기 전에 열 필요는 없습니다. Print.js는 앱 내에서 이러한 파일을 인쇄하는 빠른 방법을 제공합니다.

호스팅 서버에있는 PDF 파일을 인쇄하는 버튼을 추가합니다.


 <button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF
 </button>

결과:

대용량 파일의 경우 파일을로드 할 때 사용자에게 메시지를 표시 할 수 있습니다.


 <button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
 </button>

결과:

 

라이브러리는 base64 PDF 인쇄를 지원합니다.


 <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 </button>

결과:

HTML 인쇄

때때로 우리는 HTML 페이지의 선택된 부분을 인쇄하고 싶을 때 까다로울 수 있습니다. Print.js를 사용하면 인쇄하려는 요소의 ID를 쉽게 전달할 수 있습니다. 요소는 고유 ID가있는 한 모든 태그 일 수 있습니다. 라이브러리는 화면에 보이는 것과 매우 가깝게 인쇄하려고 시도하는 동시에 프린터 친화적 인 형식을 만듭니다.

HTML 양식에 인쇄 버튼 추가 :


 <form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

결과:

이름:
이메일:
메시지:

Print.js는 인수가있는 객체를받습니다. 양식을 다시 인쇄 해 보겠습니다. 이제 페이지에 헤더를 추가하겠습니다.


 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header
 </button>

결과:

이미지 인쇄

Print.js는 이미지 URL을 전달하여 페이지의 이미지를 빠르게 인쇄하는 데 사용할 수 있습니다. 저해상도 버전의 이미지를 사용하여 화면에 여러 이미지가있을 때 유용 할 수 있습니다. 사용자가 선택한 이미지를 인쇄하려고 할 때 고해상도 URL을 Print.js에 전달할 수 있습니다.

화면에 필요한 해상도로 페이지에 이미지를로드합니다.


 <img src="images/print-01.jpg" />

더 나은 인쇄 품질을 위해 자바 스크립트에서 가장 높은 해상도의 이미지 URL을 Print.js에 전달합니다.


 printJS('images/print-01-highres.jpg', 'image')

결과:

Print.js는 인쇄를 시도하기 전에 이미지가로드되었는지 확인하기 위해 promise를 사용합니다. 이것은 위의 예와 같이 아직로드되지 않은 고해상도 이미지를 인쇄 할 때 유용합니다.

인쇄중인 이미지에 헤더를 추가 할 수도 있습니다.


 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

결과:

여러 이미지를 함께 인쇄하기 위해 이미지 배열을 전달할 수 있습니다. 각 이미지에 적용 할 스타일을 전달할 수도 있습니다.


 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Multiple Images',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

결과:

JSON 인쇄

동적 데이터 또는 자바 스크립트 개체 배열을 인쇄하는 간단하고 빠른 방법입니다.

자바 스크립트 코드에 다음 데이터 세트가 있습니다. 이것은 아마도 서버 API에 대한 AJAX 호출에서 올 것입니다.


 someJSONdata = [
    {
       name: 'John Doe',
       email: 'john@doe.com',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: 'barry@flash.com',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: 'cool@dude.com',
       phone: '333-333-3333'
    }
 ]

Print.js에 전달할 수 있습니다.


 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data
 </button>

결과:


커스텀 CSS를 전달하여 데이터 그리드의 스타일을 지정할 수 있습니다.


 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: ['name', 'email', 'phone'],
	    type: 'json',
	    gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
	    gridStyle: 'border: 2px solid #3971A5;'
	})">
    Print JSON Data
 </button>

결과:


객체 배열을 보내는 테이블 헤더 텍스트를 사용자 정의 할 수 있습니다.


 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: [
		{ field: 'name', displayName: 'Full Name'},
		{ field: 'email', displayName: 'E-mail'},
		{ field: 'phone', displayName: 'Phone'}
	    ],
	    type: 'json'
        })">
    Print with custom table header text
 </button>

결과:


JSON, HTML 및 이미지 인쇄는 원시 HTML 헤더를 수신 할 수 있습니다.


<button type="button" onclick="printJS({
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom header</h3>',
		style: '.custom-h3 { color: red; }'
	  })">
	Print header raw html
</button>
 
 

결과:

다운로드 및 설치

GitHub 릴리스에서 최신 버전의 Print.js를 다운로드 할 수 있습니다.

v1.0.61 다운로드

npm을 사용하여 설치하려면 :


  npm install print-js --save

원사를 사용하여 설치하려면 :


  yarn add print-js

npm 또는 yarn을 통해 설치할 때 라이브러리를 프로젝트로 가져옵니다.


  import print from 'print-js'

KeyCDN 덕분에 CDN도 사용할 수 있습니다 .


  https://printjs-4de6.kxcdn.com/print.min.js
  https://printjs-4de6.kxcdn.com/print.min.css


시작하기

먼저 페이지에 Print.js 라이브러리를 포함해야합니다.


 <script src="print.js"></script>

모달 기능을 사용하려면 페이지에 Print.css도 포함하십시오.


 <link rel="stylesheet" type="text/css" href="print.css">

그게 다야. 이제 페이지에서 Print.js를 사용할 수 있습니다.

자바 스크립트 코드를 작성할 때 라이브러리는 전역 변수 인 printJS.

Print.js 사용

이 4 개 가지 인쇄 문서 유형은 다음과 같습니다 'pdf''html''image'와 'json'.

기본 유형은 'pdf'입니다.

기본 사용법은 printJS()PDF 문서 URL : 을 호출 하고 전달하는 것 printJS('docs/PrintJS.pdf')입니다.

이미지 파일의 경우 아이디어는 동일하지만 두 번째 인수를 전달해야합니다 printJS('images/PrintJS.jpg', 'image')..

HTML 요소를 인쇄하려면 비슷한 방식으로 요소 ID와 유형을 전달 printJS('myElementId', 'html')합니다..

JSON 데이터를 인쇄 할 때 인쇄하려는 데이터, 유형 및 데이터 속성을 전달합니다.
printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']});

구성

Print.js는 몇 가지 옵션을 구성 할 수있는 인수로 객체를 허용합니다.

논의
기본값
기술
인쇄 가능
없는
문서 소스 : pdf 또는 이미지 URL, html 요소 ID 또는 json 데이터 객체.
유형
'pdf'
인쇄 가능한 유형. 사용 가능한 인쇄 옵션은 pdf, html, image, json 및 raw-html입니다.
헤더
없는
HTML, 이미지 또는 JSON 인쇄에 사용할 선택적 헤더입니다. 페이지 상단에 배치됩니다. 이 속성은 텍스트 또는 원시 HTML을 허용합니다.
headerStyle
'글꼴 무게 : 300;'
헤더 텍스트에 적용 할 선택적 헤더 스타일입니다.
maxWidth
800
최대 문서 너비 (픽셀)입니다. 필요에 따라 변경하십시오. HTML, 이미지 또는 JSON을 인쇄 할 때 사용됩니다.
CSS
없는
이를 통해 인쇄중인 html에 적용해야하는 하나 이상의 css 파일 URL을 전달할 수 있습니다. 값은 단일 URL이있는 문자열이거나 여러 URL이있는 배열 일 수 있습니다.
스타일
없는
이를 통해 인쇄중인 html에 적용해야하는 사용자 정의 스타일로 문자열을 전달할 수 있습니다.
scanStyles
진실
false로 설정하면 라이브러리는 인쇄중인 html에 적용된 스타일을 처리하지 않습니다. css매개 변수를 사용할 때 유용합니다 .
targetStyle
없는
기본적으로 라이브러리는 HTML 요소를 인쇄 할 때 일부 스타일 만 처리합니다. 이 옵션을 사용하면 처리 할 스타일 배열을 전달할 수 있습니다. 예 : [ 'padding-top', 'border-bottom']
targetStyles
없는
그러나 'targetStyle'과 동일하지만 다양한 스타일을 처리합니다. 예 [ '패딩' '국경'] 등 '국경 바닥', '국경 탑', '국경 왼쪽', '국경 오른쪽', '패딩 탑'을 포함 할 것이다 :
당신은 또한 수 모든 스타일을 처리하려면 [ '*']를 전달하십시오.
ignoreElements
[]
상위 html 요소를 인쇄 할 때 무시해야하는 html ID 배열을 허용합니다.
속성
없는
JSON을 인쇄 할 때 사용됩니다. 이것은 객체 속성 이름입니다.
gridHeaderStyle
'글꼴 두께 : 굵게;'
JSON 데이터를 인쇄 할 때 그리드 헤더의 선택적 스타일입니다.
gridStyle
'테두리 : 1px 단색 밝은 회색; margin-bottom : -1px; '
JSON 데이터를 인쇄 할 때 그리드 행에 대한 선택적 스타일입니다.
repeatTableHeader
진실
JSON 데이터를 인쇄 할 때 사용됩니다. 로 설정 false하면 데이터 테이블 헤더가 첫 페이지에만 표시됩니다.
showModal
없는
큰 PDF 파일을 검색하거나 처리 할 때 사용자 피드백을 표시하려면이 옵션을 활성화합니다.
modalMessage
'문서 검색 중 ...'
가로 showModal설정된 경우 사용자에게 표시되는 메시지 true입니다.
onLoadingStart
없는
PDF가로드 될 때 실행되는 기능
onLoadingEnd
없는
PDF가로드 된 후 실행되는 기능
문서 제목
'문서'
html, image 또는 json을 인쇄 할 때 문서 제목으로 표시됩니다. 사용자가 인쇄 작업을 pdf 파일로 저장하려는 경우 문서의 이름이됩니다.
fallbackPrintable
없는
pdf를 인쇄 할 때 브라우저가 호환되지 않는 경우 (브라우저 호환성 표 확인) 라이브러리는 새 탭에서 pdf를 엽니 다. 이렇게하면`printable`에 전달 된 원본 대신 열릴 다른 pdf 문서를 전달할 수 있습니다. 대체 pdf 파일에 javascript를 삽입하는 경우 유용 할 수 있습니다.
onPdfOpen
없는
pdf를 인쇄 할 때 브라우저가 호환되지 않는 경우 (브라우저 호환성 표 확인) 라이브러리는 새 탭에서 pdf를 엽니 다. 여기에 콜백 함수를 전달할 수 있으며,이 경우 실행됩니다. 인쇄 흐름을 처리하고 사용자 인터페이스를 업데이트하려는 경우에 유용 할 수 있습니다.
onPrintDialogClose
없는
브라우저 인쇄 대화 상자가 닫히면 콜백 함수가 실행됩니다.
onError
오류 => 오류 발생
오류 발생시 실행할 콜백 함수입니다.
base64
그릇된
base64 데이터로 전달 된 PDF 문서를 인쇄 할 때 사용됩니다.
honorMarginPadding (사용되지 않음 )
진실
인쇄중인 요소에서 패딩과 여백을 유지하거나 제거하는 데 사용됩니다. 때로는 이러한 스타일 설정이 화면에서는 훌륭하지만 인쇄 할 때는보기에 좋지 않습니다. 이를 false로 설정하여 제거 할 수 있습니다.
honorColor (사용되지 않음 )
그릇된
텍스트를 컬러로 인쇄하려면이 속성을 true로 설정하십시오. 기본적으로 모든 텍스트는 검은 색으로 인쇄됩니다.
폰트 (사용되지 않음 )
'TimesNewRoman'
HTML 또는 JSON을 인쇄 할 때 사용되는 서체입니다.
font_size (사용되지 않음 )
'12pt'
HTML 또는 JSON을 인쇄 할 때 사용되는 글꼴 크기입니다.
imageStyle (사용되지 않음 )
'너비 : 100 %;'
이미지를 인쇄 할 때 사용됩니다. 각 이미지에 적용 할 사용자 정의 스타일이있는 문자열을 허용합니다.

브라우저 호환성

현재 모든 라이브러리 기능이 브라우저간에 작동하는 것은 아닙니다. 다음은 이러한 주요 브라우저에서 최신 버전을 사용하여 수행 한 테스트 결과입니다.

구글 크롬
원정 여행
Firefox
가장자리
오페라
인터넷 익스플로러
PDF
HTML
이미지
JSON

지원 해주신 BrowserStack에 감사드립니다. 놀라운 크로스 브라우저 테스트 도구.