สร้าง PDF ด้วย mPDF ออกแบบผ่าน Google Docs

สำหรับใครที่ต้องการสร้างไฟล์ PDF ขึ้นมาจาก html เลยอาจจะค่อนข้างปวดหัว เนื่องจากกะขนาดไม่ตรง ในบทความนี้จะมาสอนวิธีสร้างไฟล์ PDF โดยดีไซน์ผ่าน Google Docs และปรับแต่งค่านิดๆหน่อยๆ เพื่อให้ผลลัพธ์เหมือนกับที่เราได้ดีไซน์ไว้ผ่าน mPDF ในภาษา PHP

รูปภาพข้างบนนี้ก็ถือเป็นไฟล์ตัวอย่างง่ายๆที่ผมดีไซน์เอาไว้ใช้กับบทความอันนี้ และเมื่อเราตกแต่งหน้าตาให้เป็นไปอย่างที่ต้องการแล้ว

• ให้ Export เป็นไฟล์ Html
• เปิด inspect tool เพื่อทำการ ก๊อปปี้ html code ทั้งหมด
• นำมาวางไว้ในไฟล์ doc.html เพื่อให้ง่ายต่อการแก้ไข css ซึ่งจะถูกเรียกใช้งานในขั้นตอนถัดไป

จากนั้นก็สามารถก๊อปโค้ดด้านล่างนี้ไปเก็บไว้ใน index.php ไฟล์

ในที่นี้จะใช้ฟอนต์ Sarabun ซึ่งสามารถกดดาวน์โหลดได้จากลิ้งตรงนี้ได้เลย จากนั้นสร้าง folder ที่มีชื่อว่า font เพื่อเอาไว้เก็บฟอนต์ที่เราเพิ่งโหลดมา โดยเราจะใช้เพียง

• Sarabun-Regular.ttf
• Sarabun-Italic.ttf
• Sarabun-Bold.ttf

ซึ่งเป็นฟอนต์ที่ผมแนะนำเนื่องจากฟอนต์ไม่เพี้ยน สระไม่เพี้ยน และมีความใกล้เคียงกับ ฟอนต์ใน Google Docs ที่เรา ดีไซน์มามากที่สุด

สามารถติดตั้ง mpdf ด้วยคำสั่ง

composer require mpdf/mpdf

หากใครยังไม่ได้ติดตั้ง composer ก็สามารถไปอ่านเพิ่มเติมได้ที่

<?php

require_once '../vendor/autoload.php';

$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];

$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];

$mpdf = new \Mpdf\Mpdf([
    'format' => [210, 297],
    'fontDir' => array_merge($fontDirs, [
        '../mpdf/font',
    ]),
    'fontdata' => $fontData + [
        // lowercase letters only in font key
        'sarabun' => [
            'R' => 'THSarabun.ttf',
            'I' => 'THSarabun Italic.ttf',
            'B' => 'THSarabun Bold.ttf',
        ]
    ],
    'default_font' => 'sarabun'
]);
//ตั้งค่าหน้ากระดาษ
$mpdf->AddPageByArray([
    'margin-left' => 15,
    'margin-right' => 15,
    'margin-top' => 20,
    'margin-bottom' => 20,
]);
$html = strval(file_get_contents('doc.html'));

// $mpdf->list_number_suffix = '.sdf';
// $mpdf->list_symbol_size = '10pt';
$mpdf->WriteHTML($html);
$mpdf->Output();

?>

สังเกตว่าเมื่อลองเปิดหน้าเว็บเพจดูมันจะไม่ตรง ซึ่งวิธีการแก้ไขตามขั้นตอนต่อไป

• ลบ class ที่ไม่ได้ใช้ออก
• เปลี่ยน font-family ทุกอันให้เป็น Sarabun
• ขยายฟอนต์โดยคูณ1.5 เท่าของที่ดีไซน์ไว้ใน Google Docs เช่นที่เราดีไซน์เป็น 12 pt ก็ต้องปรับ เป็น 18pt
• หาฟอนต์ตัวหนา โดยการไปใส่แท๊ก <b></b> ครอบ ในที่นี้คือที่ Title
• ปรับ line-height ลงเหลือ 1

Result before apply my method

Result after apply my method

ถ้าหากเปรียบเทียบกับไฟล์ที่ดีไซน์ไว้

Result after apply my method

Design in google docs

สังเกตว่าก็จะมีความใกล้เคียงระดับนึง แต่ก็ไม่ได้เหมือนสะทีเดียว

mpdf จะดีกว่า tcpdf เนื่องจาก mpdf สามารถอ่านค่า attribute html ได้มากกว่า ไม่ว่าจะเป็นเรื่อง padding หรือ margin ซึ่งทำให้ง่ายต่อการควบคุมมากกว่านั้นเอง

เพียงเท่านี้ก็สามารถสร้างไฟล์ pdf ผ่าน google docs เพื่อเอามาใช้งานกับโค้ดของเราได้ทันที

ข้อมูลเพิ่มเติม จาก csdp.stou.ac.th/