ถ้ากำลังมองหาวิธีการสร้างไฟล์ pdf ฝั่ง client อยู่ ขอนำเสนอตัวนี้เลยครับ pdfmake ไปลองเล่นดูได้ พอลองดูก็จะพบว่าตัว example ที่เค้าให้มา font ไม่ support ภาษาไทย ถ้าอยากให้มันใช้ font ไทยได้มีมีขั้นตอนดังนี้ครับ
(ขอข้ามการสร้าง project react ไปนะครับ )
1.install pdfmake
|
1 |
npm install pdfmake --save |
2.import pdfmak และ pdfFonts เข้าไปใช้งานใน component ที่ต้องการ
|
1 2 3 |
import pdfMake from "pdfmake/build/pdfmake"; import pdfFonts from "pdfmake/build/vfs_fonts"; pdfMake.vfs = pdfFonts.pdfMake.vfs; |
สร้าง method printPDF() สำหรับทดสอบ (bind เข้ากับปุ่มที่ต้องการ)
|
1 2 3 4 5 6 7 8 9 10 |
printPDF(){ var docDefinition = { content: [ { text: 'สวัสดีประเทศไทย reat pdf demo ', fontSize: 15 }, ], }; pdfMake.createPdf(docDefinition).open() } |
ผลลัพธ์
ไม่ support ภาษาไทย
3.เพิ่ม font ภาษาไทยเข้าไปยัง pdfmake
ref: https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts—client-side
3.1 เข้าไปสร้าง folder ที่ (prject folder)/node_modules/pdfmake/
สร้าง folder examples -> fonts
3.2 download font ไทยที่ต้องการ ในที่นี้จะใช้ font THSarabunNew
download font Roboto จาก https://github.com/bpampuch/pdfmake/tree/master/examples/fonts ไปด้วยนะครับ ไม่งั้นตอน build font ใหม่ ตัว font ที่เป็น default ของ pdfmake จะหายไป ทำให้ run ไม่ผ่านครับ
3.3 นำไฟล์ที่ download ได้ไปวางที่ (prject folder)/node_modules/pdfmake/examples/fonts
4.build font ใหม่
4.1 เปิด terminal หรือ command line เข้าไปยัง (prject folder)/node_modules/pdfmake/ แล้วสั่ง run
npm install
4.2 สั่ง run
gulp buildFonts
เมื่อสำเร็จจะได้ไฟล์ vsf_fonts.js ใหม่ ลองเปิดและค้นตามชื่อ font จะพบ font ที่เราต้องการใช้
5.เรียกใช้งาน font ภาษาไทยที่ react component
จากข้อ 1 เราต้องมีการ set font เพิ่มตอนเรียกใช้งานดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import pdfMake from "pdfmake/build/pdfmake"; import pdfFonts from "pdfmake/build/vfs_fonts"; pdfMake.vfs = pdfFonts.pdfMake.vfs; //ต้องระบุตามชื่อของ ไฟล์ font pdfMake.fonts = { THSarabunNew: { normal: 'THSarabunNew.ttf', bold: 'THSarabunNew-Bold.ttf', italics: 'THSarabunNew-Italic.ttf', bolditalics: 'THSarabunNew-BoldItalic.ttf' }, Roboto: { normal: 'Roboto-Regular.ttf', bold: 'Roboto-Medium.ttf', italics: 'Roboto-Italic.ttf', bolditalics: 'Roboto-MediumItalic.ttf' } } |
ใส่ defaultStyle font เป็น THSarabunNew
6.ผลลัพธ์
run project ใหม่ ด้วย npm start หรือ yarn start เพื่อให้ complile ไฟล์ vsf_fonts.js เข้าไปใหม่ด้วย
แล้วกดดูจะได้ผลลัพธ์ ดังนี้ครับ
จบแล้วครับ หวังว่าจะมีประโยชน์นะครับ
ลองตัวอื่นก็ได้นะครับ แต่ตัวนี้ตอบโจทย์ภาษไทยได้ดีสุด
https://github.com/diegomura/react-pdf => ไม่สำเร็จ ใช้งานไม่ได้
https://github.com/MrRio/jsPDF => ตัวนี้ได้ แต่ไม่ support ภาษาไทย
jsPDF + html2canvas => ได้ ภาษาไทย แต่ตอนแปลง html เป็น canvas จะมีปัญหาพวกตัวอักษรยก และวรรณยุกต์
React + pdfmake ตัวอย่างที่ใช้จัด
source code : https://goo.gl/bBB4SE