Print.js À¥¿¡¼ ÀμâÇÏ´Â µ¥ µµ¿òÀ̵Ǵ ÀÛÀº ÀÚ¹Ù ½ºÅ©¸³Æ® ¶óÀ̺귯¸®
Print.js
À¥¿¡¼ ÀμâÇÏ´Â µ¥ µµ¿òÀ̵Ǵ ÀÛÀº ÀÚ¹Ù ½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÔ´Ï´Ù.
PDF Àμâ
Print.js´Â ÁÖ·Î ÀÎÅÍÆäÀ̽º¸¦ ¹þ¾î³ªÁö ¾Ê°í ÀÓº£µå¸¦ »ç¿ëÇÏÁö ¾Ê°í ¾Û ³»¿¡¼ PDF ÆÄÀÏÀ» Á÷Á¢ Àμâ ÇÒ ¼ö ÀÖµµ·Ï ÀÛ¼ºµÇ¾ú½À´Ï´Ù. »ç¿ëÀÚ°¡ PDF ÆÄÀÏÀ» ¿°Å ³ª ´Ù¿î·Îµå ÇÒ ÇÊ¿ä°¡¾ø°í ´ë½Å Àμ⠸¸ÇϸéµÇ´Â °íÀ¯ ÇÑ »óȲÀÇ °æ¿ì.
¿¹¸¦ µé¾î ÀÌ°ÍÀÌ À¯¿ëÇÑ ½Ã³ª¸®¿À Áß Çϳª´Â »ç¿ëÀÚ°¡ ¼¹ö Ãø¿¡¼ »ý¼º µÈ º¸°í¼¸¦ ÀμâÇϵµ·Ï ¿äûÇÒ ¶§ÀÔ´Ï´Ù. ÀÌ·¯ÇÑ º¸°í¼´Â PDF ÆÄÀÏ·Î ´Ù½Ã Àü¼ÛµË´Ï´Ù. ÀÌ·¯ÇÑ ÆÄÀÏÀ» ÀμâÇϱâ Àü¿¡ ¿ ÇÊ¿ä´Â ¾ø½À´Ï´Ù. Print.js´Â ¾Û ³»¿¡¼ ÀÌ·¯ÇÑ ÆÄÀÏÀ» ÀμâÇÏ´Â ºü¸¥ ¹æ¹ýÀ» Á¦°øÇÕ´Ï´Ù.
PDF ÆÄÀÏÀº ¾ÛÀÌ È£½ºÆõǴ µµ¸ÞÀΰú µ¿ÀÏÇÑ µµ¸ÞÀο¡¼ Á¦°øµÇ¾î¾ßÇÕ´Ï´Ù. Print.js´Â iframeÀ» »ç¿ëÇÏ¿© ÆÄÀÏÀ» ÀμâÇϱâ Àü¿¡·ÎµåÇϹǷΠµ¿ÀÏÇÑ Ãâó Á¤Ã¥¿¡ ÀÇÇØ Á¦Çѵ˴ϴ٠. ÀÌ´Â Å©·Î½º »çÀÌÆ® ½ºÅ©¸³Æà (XSS) °ø°Ý À» ¹æÁöÇÏ´Â µ¥ µµ¿òÀ̵˴ϴ٠.
¿¹
È£½ºÆà ¼¹ö¿¡ÀÖ´Â PDF ÆÄÀÏÀ» ÀμâÇÏ´Â ¹öÆ°À» Ãß°¡ÇÕ´Ï´Ù.
<button type="button" onclick="printJS('docs/printjs.pdf')">
Print PDF
</button>
°á°ú:
Firefox´Â ÇöÀç iframeÀ» »ç¿ëÇÑ PDF ¹®¼ Àμ⸦ Çã¿ëÇÏÁö ¾Ê½À´Ï´Ù. ÀÌ¿¡ ´ëÇÑ Mozilla À¥ »çÀÌÆ®¿¡ °ø°³ ¹ö±× °¡ ÀÖ½À´Ï´Ù. Firefox¸¦ »ç¿ëÇÒ ¶§ Print.js´Â PDF ÆÄÀÏÀ» »õ ÅÇÀ¸·Î ¿±´Ï ´Ù.
´ë¿ë·® ÆÄÀÏÀÇ °æ¿ì ÆÄÀÏÀ»·Îµå ÇÒ ¶§ »ç¿ëÀÚ¿¡°Ô ¸Þ½ÃÁö¸¦ Ç¥½Ã ÇÒ ¼ö ÀÖ½À´Ï´Ù.
<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¸¦ ´Ù¿î·Îµå ÇÒ ¼ö ÀÖ½À´Ï´Ù.
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´Â ¸î °¡Áö ¿É¼ÇÀ» ±¸¼º ÇÒ ¼öÀÖ´Â Àμö·Î °´Ã¼¸¦ Çã¿ëÇÕ´Ï´Ù.
css
¸Å°³ º¯¼ö¸¦ »ç¿ëÇÒ ¶§ À¯¿ëÇÕ´Ï´Ù .´ç½ÅÀº ¶ÇÇÑ ¼ö ¸ðµç ½ºÅ¸ÀÏÀ» ó¸®ÇÏ·Á¸é [ '*']¸¦ Àü´ÞÇϽʽÿÀ.
false
ÇÏ¸é µ¥ÀÌÅÍ Å×À̺í Çì´õ°¡ ù ÆäÀÌÁö¿¡¸¸ Ç¥½ÃµË´Ï´Ù.showModal
¼³Á¤µÈ °æ¿ì »ç¿ëÀÚ¿¡°Ô Ç¥½ÃµÇ´Â ¸Þ½ÃÁö true
ÀÔ´Ï´Ù.ºê¶ó¿ìÀú ȣȯ¼º
ÇöÀç ¸ðµç ¶óÀ̺귯¸® ±â´ÉÀÌ ºê¶ó¿ìÀú°£¿¡ ÀÛµ¿ÇÏ´Â °ÍÀº ¾Æ´Õ´Ï´Ù. ´ÙÀ½Àº ÀÌ·¯ÇÑ ÁÖ¿ä ºê¶ó¿ìÀú¿¡¼ ÃֽŠ¹öÀüÀ» »ç¿ëÇÏ¿© ¼öÇà ÇÑ Å×½ºÆ® °á°úÀÔ´Ï´Ù.
Áö¿ø ÇØÁֽŠBrowserStack¿¡ °¨»çµå¸³´Ï´Ù. ³î¶ó¿î Å©·Î½º ºê¶ó¿ìÀú Å×½ºÆ® µµ±¸.