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

design pdf with google docs and export by mpdf in php

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

Design in google docs
Design in google docs

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

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

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

เตรียมฟอนต์ภาษาไทย

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

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

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

ติดตั้ง mPDF ด้วย Composer

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

composer require mpdf/mpdf

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

เพิ่มโค้ดใน Index file

<?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
Delete unnecessry class
Delete unnecessry class
Delete 0 padding in Table cell
Delete 0 padding in Table cell
Change font-family to Sarabun
Change font-family to Sarabun
Change font-size by multiply by 1.5
Change font-size by multiply by 1.5
Add <b> tag for bold text
Add <b> tag for bold text

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

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

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

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

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

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x