vue.js + pdfmake.js สอนวิธีแสดงภาษาไทย

ใช้ Vue.js + Pdfmake.js สร้าง PDF ให้แสดงภาษาไทยได้

ผมได้ research ตัว generate pdf แล้วได้พบว่าตัวนี้ใช้งานง่ายสุด สามารถใช้ได้ทั้ง server/client รวมถึงสามารถ custom font ได้

ผมจะติต่างว่าทุกคนมีโปรเจค vue.js แล้ว อันดับแรกลง pdfmake ก่อนเลยครับ

npm install pdfmake

จากนั้นสร้างไฟล์ component ในที่นี้ผมใช้ App.vue เลย

อธิบายโค้ดข้างต้น

• ประกาศตัวแปร docDefinition object มี content array เป็น ‘English, ‘ไทย’

• กำหนด fonts Roboto ซึ่งเป็น default font ต้องมี ไม่งั้นจะ error

• สร้าง pdf โดยคำสั่ง pdfMake.createPdf() และ .open({}, window) เพื่อเปิด pdf ในหน้าปัจจุบัน

เปิด browser จะเห็น pdf ที่มีตัวหนังสือ ‘English’ กับตัวหนังสือต่างดาว ซึ่งก็คือ ตัวหนังสือภาษาไทย แต่ font roboto ไม่สามารถอ่านภาษาไทย ขั้นตอนต่อไป generate font กันครับ

จากที่ดูจากตัวอย่าง code ข้างบน สามารถเพิ่ม font ได้โดยใช้ cdn ได้เลย แต่จากที่ผมลองใช้ url ของ google font ไม่สามารถใช้ได้ เลยเจอไลบรารี่หนึ่งที่ทำการ generate font ให้ นั่นคือ pdfmake-font-generator

npm install pdfmake-font-generator --save-dev

สามารถ install package โดยลงแบบ dev dependencies

npm install -g pdfmake-font-generator

หรือ install package แบบ global ได้ครับ

ผมทำการดาวน์โหลด Kanit font จาก google font และเก็บไว้ที่ floder my-fonts

pdfmakefg ./src/assets/my-fonts ./src/assets/custom-fonts.js

pdfmakefg คือ command generate font วิธีใช้: pdfmakefg <source directory><destination directory>

กลับมาที่โค้ด

• impot custom font ที่ได้จากการ generate

• ดึงค่า vfs จากค่าที่ได้จากการ generate

• เพิ่ม font kanit

• เพิ่ม font kanit เป็น font default

กลับมาที่ browser จะได้ข้อความที่เป็นภาษาไทยตามที่ต้องการ เย้!

แถมมม!!

ผมขออีกหน่อย 555 นั่นคือ ใช้งานพวก font icon อย่างเช่น fontawesome วิธีทำก็คล้าย ๆ กับพวก font เพียงแต่สามารถดาวน์โหลดจาก https://fontello.com เท่านั้น

ทำการเพิ่ม fontello.tff ไว้ที่ my-fonts directory

pdfmakefg ./src/assets/my-fonts ./src/assets/custom-fonts.js

ทำการ generate font

fontello จากที่ดาวน์โหลดจะมีไฟล์ fontello-codes.css ซึ่งข้อความที่จะใช้แสดงสามารถคัดลอกจากรูปสี่เหลี่ยม

กลับมาที่โค้ด

• ทำการเพิ่ม FontTello font

• เพิ่ม font tello ที่คัดลอกจาก fontello-codes.css มี style ชื่อ icon

• เพิ่ม styles ชื่อ icon โดยที่ font เป็น Fontello

กลับมาที่ browser ตัว pdf แสดง icon กล้องตามที่ผมดาวน์โหลดไว้ เป็นอันเสร็จสิ้น!!

bpampuch/pdfmake Client/server side PDF printing in pure JavaScript - bpampuch/pdfmakegithub.com

Lugriz/pdfmake-font-generator CLI to generate custom fonts to use them with pdfmake You can install it locally as a dev dependency, since it is only…github.com