มีโปรเจค Web App ที่ต้องมีการสร้าง pdf file เลยต้องมาค้นหา library และก็ได้มาพบกับ pdfmake ซึ่งก็พบว่าใช้งานง่ายไม่ซับซ้อน แต่ไม่มีอักษรที่รองรับภาษาไทยเป็นชุดอักษรเริ่มต้น🥺 แต่สามารถเพิ่มฟอนต์ที่ต้องการใช้งานได้ มาดูกันครับว่าจะทำการการเพิ่มฟอนต์ Sarabun สำหรับภาษาไทยได้อย่างไรครับ
ก่อนอื่นเลยให้ download font ที่ต้องการใช้งานทั้ง Sarabun และ Roboto (เป็น Default ของ pdfmake ต้องกำหนดด้วยทุกครั้งครับ) จาก Google font มาเก็บไว้ก่อนเลย ที่ใช้งานก็มีแค่ 4 แบบ ตามนี้
ติดตั้ง pdfmake
ไปที่ folder project ที่ต้องการ แล้วติดตั้งผ่าน Node Package Manager ได้เลย
npm install pdfmake --save
import pdfmake และ pdfFonts เข้าไปใช้งาน
สร้าง function makePDF() สำหรับทดสอบเข้ากับปุ่มที่ต้องการ
สิ่งที่ได้ไม่ support ภาษาไทย 🥺🥺🥺
ติดตั้งฟอนต์ Sarabun สำหรับภาษาไทย
ติดตั้ง gulp ก่อนนะ รายละเอียดตามนี้เลย https://gulpjs.com/docs/en/getting-started/quick-start/
npm install --global gulp-cliสร้าง folder examples/fonts ที่ (project folder)/node_modules/pdfmake/ แล้ว copy font ทั้ง Sarabun และ Roboto ไปไว้ใน folder เลยครับ
เปิด command line เข้าไปยัง (project folder)/node_modules/pdfmake/ แล้วสั่ง run
npm installตามด้วย
gulp buildFontsลองเปิด ไฟล์ vsf_fonts.js ใหม่ และค้นตามชื่อ font ถ้าพบ font ที่เราต้องการใช้ก็เป็นอันว่าสำเร็จ🔥
เรียกใช้งาน font ภาษาไทย
ได้ pdf ที่ support ภาษาไทยแล้วครับ 😊😊😊
ตัวอย่างเอกสารภาษาไทยที่สร้างด้วย pdfmake และติดตั้งฟอนต์ THSarabunNew จะเห็นได้ว่า รองรับภาษาไทยได้ดีมากๆ เลยครับ 😊😊😊
ตัวอย่างการสร้าง Report จากข้อมูลที่กรอกในแบบฟอร์ม
😊Tips : สำหรับไฟล์ vsf_fonts.js ที่ได้มาหลังจากเพิ่มฟอนต์ไปแล้วนั้น เราสามารถ Copy ไปไว้ใช้ใน Project หรืองานอื่นๆ ได้เลย ไม่ต้องเสียเวลาสร้างใหม่
รายละเอียดขั้นตอนตาม document https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/vfs/
ท้ายสุด เพียงแค่นี้ก็จะได้ฟังก์ชันการสร้างไฟล์ pdf ที่รองรับภาษาไทยและยังกำหนดฟอนต์ตามที่ต้องการได้อีกด้วย ก็หวังว่าจะเป็นแนวทางให้เพื่อนๆ นำไปใช้งานได้อีกเช่นเคยครับ 🧑🚀
โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
https://bit.ly/3c4tlmV
Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
http://bit.ly/36q8A12