예

호스팅 서버에있는 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>

결과:

 <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>

결과:

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

 <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;'
 })

자바 스크립트 코드에 다음 데이터 세트가 있습니다. 이것은 아마도 서버 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>
 
 

결과: