สร้าง PDF ภาษาไทย ด้วย ReactJS กับ PDFMake

Published in

Urbanice

3 min readJan 9, 2021

สำหรับใครที่ใช้ ReactJS และต้องการสร้างไฟล์ PDF ภาษาไทย ที่ต้องไปฝังอยู่ฝั่ง Client วันนี้มาเสนอวิธีทำง่ายๆ ด้วย PDFMake ครับ ซึ่งปกติจะไม่รองรับภาษาไทย … แต่วันนี้เราจะมาทำให้มันรองรับกันครับ

สำหรับวิธีในการทำให้ custom font (font อะไรก็ได้) ของเราไปแสดงอยู่ในฝั่ง client ได้นั้นทำได้ดังนี้ครับ

ทดลองสร้าง PDF ภาษาไทยด้วย pdfmake

Step 1: ติดตั้ง pdfmake ในโปรเจ็คของเรา

npm install pdfmake — save

หมายเหตุ Minimal version: 0.1.66

Step 2: ทำการ Import pdfmake ใน

import pdfMake from "pdfmake/build/pdfmake";

Step 3: สร้าง function สำหรับสร้าง PDF

Step 3: สร้าง function สำหรับสร้าง PDFfunction printPDF(){   var docDefinition = {     content: [       { text: ‘สร้าง PDF ภาษาไทยด้วย pdfmake ‘, fontSize: 15 },      ],    };   pdfMake.createPdf(docDefinition).open()}

tep 4: ทดสอบลองรันโปรเจ็คดู

ผลการสร้าง PDF ภาษาไทย แบบที่ตั้งไม่ได้ตั้งค่า font จะทำให้อ่านภาษาไทยไม่ได้

วิธีที่ 1: ใช้ Virual File System (VFS)

Step 1: ดาวโหลด Font

ดาวโหลด Default Font: Roboto > https://github.com/bpampuch/pdfmake/tree/master/examples/fonts
ดาวโหลด Font ภาษาไทย ซึ่งในที่นี้ เราจะใช้ TH Sarabun New > https://www.f0nt.com/release/th-sarabun-new/

Step 2: นำ Font ทั้งหมดไปใส่ใน Folder ใหม่

นำ Font ทั้งหมดไปใส่ใน (project)/node_modules/pdfmake/example/fonts

*หมายเหตุ ต้องสร้างโฟลเดอร์ใหม่คือ example/fonts

นำ Font ทั้งหมดไปใส่ใน (project)/node_modules/pdfmake/example/fonts

Step 3: Build Font ทั้งหมดที่เราเตรียมไว้

หาใครยังไม่ได้ติดตั้ง gulp ให้ติดตั้งก่อน ด้วยคำสั่งนี้ (ใครมีแล้วให้ข้ามไป)

npm install --global gulp-cli

เปิด Terminal แล้วไปที่ path > (project)/node_modules/pdfmake/ แล้วพิมพ์คำสั่ง

npm install

พิมพ์คำสั่ง

gulp buildFonts

เมื่อ build เสร็จ เข้าไปที่ path > (project)/node_modules/pdfmake/build เราจะได้ไฟล์ vsf_fonts.js ให้เราเปิดไฟล์ดู จะพบชื่อ font ที่เราเพิ่มไปครับ

ในไฟล์ vsf_fonts.js จะมีฟอนต์ที่เรา build ไปอยู่ครับ

Step 4: เรียกใช้งาน Font

ให้เพิ่มคำสั่งไปสำหรับทุกฟอนต์ที่เราเพิ่มไปดังนี้ครับ

import pdfMake from "pdfmake/build/pdfmake"; 
import pdfFonts from "pdfmake/build/vfs_fonts"; 
pdfMake.vfs = pdfFonts.pdfMake.vfs;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'
  }
}