ข้ามไปที่เนื้อหาหลัก

การเพิ่ม Font ภาษาไทยอื่นๆ เข้าไปใช้งานใน MPDF


เนื่องมาจากผมได้มีโอกาสจับงานที่ต้องแปลงหน้าเว็บให้เป็น PDF ลองๆ หาข้อมูลก็ไปเจอเจ้าตัวนี้ MPDF ซึ่งจริงๆ แล้วก็มีให้ใช้งานอีกหลายๆ ตัว สาเหตุที่เลือกใช้งานตัวนี้เพราะมัน ค่อนข้างจะติดตั้ง และใช้งานง่าย และยังสามารถอ้างอิง CSS เข้ามาช่วยจัดหน้าตาใน PDF ได้อีกด้วย ซึ่งผลที่ได้เพี้ยนไปจากตัวจริงไม่มากครับ แต่ที่ทำให้เลือกใช้งานเพราะการเพิ่มฟ้อนท์ภาษาไทย เข้าไปนั้นค่อนข้างง่ายครับ เลยจะขอมาแนะนำดังนี้

  1.  เข้าไปในโฟลเดอร์ของ MPDF หาโฟลเดอร์ที่ชื่อ /ttfonts
  2. จากนั้นเอาฟ้อนที่เราต้องการใช้งาน Copy ไปเก็บไว้ในโฟลเดอร์นั้น
  3. แก้ไขไฟล์ config_fonts.php ซึ่งจะเก็บส่วนของการตั้งค่าตัวอักษรไว้ทั้งหมด เลื่อนไปหาในส่วนตัวแปรที่เก็บค่าฟ้อนท์ไทยเอาไว้ แล้วเขียนต่อจากของเดิม โดยเขียนตามโค้ดด้านล่าง
    "THSaraban" => array(
            'R' => "THSaraban.ttf",
            'B' => "THSaraban Bold.ttf",
            'I'  => "THSaraban Italic",
            'BI'   =>  "THSaraban BoldItalic"
            )
    
  4. จากนั้นเข้าไปแก้ไขไฟล์ config_cp.php เข้าไปตรงที่เป็นเงื่อนไขของภาษาไทย โดยเพิ่มตัวแปรที่เราเพิ่งสร้างลงไปให้ครบตามที่เราต้องการใช้
    CASE "th":  $unifonts = "garuda, garudaB, garudaI, garudaBI, norasi, norasiB, norasiI, norasiBI, THSaraban,THSarabanI, THSarabanB, THSarabanBI";  break;
  5. เวลาใช้งาน เรียกคลาสโดยประกาศ ด้วยเงื่อนไขภาษาไทย
    $html = 'สวัสดีครับ';
    $pdf = new mPdf('th', 'A4', '0', 'THSaraban');
    $pdf->SetAutoFont();
    $pdf->SetDisplayMode('fullpage');
    $pdf->WriteHTML($stylesheet, 1);
    $pdf->WriteHTML($html, 2);
    $pdf->Output();
    

เพิ่มเติมอีกนิด การนำ CSS เข้ามาใช้งาน โดยการใช้คำสั่ง file_get_contents(ที่อยู่ไฟล์ CSS) แล้วประกาศ Class ตามโค้ดด้านล่าง โดย 1 หมายถึงการบอกว่าเอาเฉพาะ CSS ไม่ไช่หน้า HTML

$pdf->WriteHTML($stylesheet, 1);
$pdf->WriteHTML($html, 2);

ปัญหาที่พบบ่อยๆ ก็คือ page ที่ใช้สำหรับแสดงผล PDF มักจะเอ๋อๆ ไป ควรไปปรับ Config ใน PHP เกี่ยวกับ init_memory หรือ กำหนดเอาในหน้านั้นเลยก็ได้ครับ

เพียงเท่านี้หน้า PDF ที่สร้างขึ้นมา ก็จะแสดงฟ้อนท์ ในแบบที่เราต้องการครับ ไม่ยากเลยไช่ไหม? ลองเอาไปทำกันดูนะครับ ที่นำมาเขียนเพราะว่าเนื้อหาที่เป็นภาษาไทยยังมีน้อย เลยช่วยเขียนเพิมอีกแหล่งจะได้หาเจอง่ายๆ




ความคิดเห็น

  1. ขอบคุณมากเลยค่ะ แต่ว่าเราลอง add font angsana แล้วปรากฎว่า วรรณยุกต์มันซ้อนทับกับสระอ่ะค่ะ ไม่ทราบว่าเป็นเหมือนกันหรือเปล่าคะ

    ตอบลบ
    คำตอบ
    1. ลองแต่ ไทยสารบรรณ อย่างเดียวเลยครับ เด๋วยังไงจะลองดูนะครับ ได้ผลยังไงจะแจ้งอีกที ^ ^

      ลบ
  2. เอ่อ เราลอง add THSaraban มันก้อซ้อนทับเหมือนกันอ่ะค่ะ

    ตอบลบ
  3. ทำ CSS Font-Face หรือยังครับ?

    ตอบลบ
  4. สระลอย พอมีวิธีแก้ไขไหมครับ

    ตอบลบ

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แก้ไขปัญหา Laravel+Vite redirect ไปที่ path build

  ก่อนหน้านี้ติดปัญหาเรื่องการพัฒนาเว็บแอพลิเคชันด้วย Laravel และ Vuejs โดยใช้ Vite ควบคู่ในการพัฒนา Frontend ตอนรัน npm run dev ก็ดูเหมือนจะใช้งานได้ปกติ แต่พอมาลอง build ดูปรากฏว่าตัว application คอย redirect ไปที่ path /build ตลอดเลย พอหาข้อมูล ไปๆ มาๆ ก็เจอว่าตอนที่เขียนเราใช้ router ของฝั่ง vuejs ซึ่งทำเป็น SPA const router = createRouter({     history: createWebHistory(import.meta.env.BASE_URL), }); จากโค๊ดด้านบนนี่แหละที่ มึนอยู่หลาย ชั่วโมง แก้ง่ายๆ ที่สุด คือทำแบบนี้ const router = createRouter({     history: createWebHistory(), }); เข้าใจว่า import.meta.env.BASE_URL ค่า default น่าจะเป็น /build ถ้าเอาออกจะช่วยแก้ไขปัญหาได้ แต่ยังไม่ได้ลองว่าถ้าเราไปกำหนด env ตัวนี้ขึ้นมาก็อาจจะช่วยแก้ไขปัญหาได้ด้วยหรือเปล่า? VITE_BASE_URL="/" ใครลองแล้วได้ผลมาคอมเม้นกันด้วยนะ วันนี้ไปก่อนละ

ปลดล็อคความสามารถให้กับ Sublime Text ตอนที่ 1

นานมาแล้วที่ผมเคยใช้ Dreamweaver ในการพัฒนาเว็บไซต์ตั้งแต่ CS 3 จนกระทั่งถึง CS 6 จนผมได้มาพบ Text Editor ที่ทรงพลังตัวหนึงเข้าและเกิดความประทับใจเป็นอย่างมาก จึงลองเปิดเปลี่ยนมาใช้มันดู ถ้าบอกตามความจริงแล้ว ผมเพียงแต่ใช้ตามเทรนน่ะครับ แบบเห็นคนเค้าใช้กันก็ลองใช้ดู แต่ที่ได้เห็นกับตาจริงๆ ก็คือ การโหลดโปรแกรมที่ไวในตอนเริ่ม ก่อนจะเกริ่นต่อไป ผมขอออกตัวนะครับ ว่าไม่ได้ไช่พวกคลั่ง  Sublime Text หรือจะมาบอกว่าดีกว่าตัวอื่นๆ แค่จะมานำเสนอความสามารถที่ซ่อนอยู่ สำหรับเพื่อนๆ ที่ลองใช้แล้วไม่เข้าใจว่ามันดียังไง .. เพราะความจริงก่อนหน้านั้นผมก็ใช้ Editpus หรือแม้แต่ Eclipse มาบ้างซึ่งก็ใช้ตามสถานการณ์ไม่ได้เจาะจงว่าต้อง Sublime อย่างเดียว .. สำหรับคนที่ใช้ Dreamweaver ก็อย่ากังวลครับ ไม่ได้มาบอกว่าใครที่ใช้ไม่โปร อันนี้ไม่เกี่ยวนะครับ ออกตัวไว้ให้รับทราบกันก่อน