Thai Font ใน React-pdf

ปัญหาคลาสิกที่ Library ต่าง ๆ จะไม่มีภาษาไทย ยุคนี้แก้ไม่ยาก เพียงแค่ Register Font เท่านั้น ไม่แนะนำให้เข้าไปรื้อโครงสร้างของ React-pdf แล้วใส่ Font ในนั้น

มาดู Code ทั่ว ๆ ไปสำหรับการแสดงภาษาไทยใน React-pdf

<Document>
<Page style={styles.body}>
<Text style={styles.header} fixed>สำหรับลูกค้า</Text>
<Text style={styles.header} fixed>ใบเสร็จรับเงิน/ใบกำกับภาษี</Text>
...

Render แล้วก็จะเห็นภาษาต่างดาวแบบนี้

ภาษาต่างดาวใน React-pdf

แต่ เราอยากได้แบบนี้

ภาษาไทยไฉไลใน React-pdf

เพียงแค่ 3 ขั้นตอน
1. วาง Font files (เช่น THSarabunNew.ttf) ไว้ใน Project folder สักที่ที่อ้างถึงได้ เช่นถ้าสร้าง React ด้วย create-react-app ก็วางไว้ใน /public/assets/fonts
2. Register font ด้วยคำสั่งนี้เพื่อใช้อ้างอิงในหน้าที่ทำ React-pdf

Font.register({
  family: ‘THSarabunNew’,
  src: ‘./public/assets/fonts/THSarabunNew.ttf’
});

3. ตั้งค่า Style ให้ระบุ Font Family ที่เป็นภาษาไทย

const styles = StyleSheet.create({
  header: {
  fontSize: 12,
  marginBottom: 20,
  textAlign: ‘center’,
  color: ‘grey’,
  fontFamily: ‘THSarabunNew’
}}

เท่านี้ก็ใช้ได้แล้ว