สร้างไฟล์ PDF จาก HTML + CSS ด้วย iText7.pdfhtml (C#)

การพัฒนา Web Application หลายครั้งที่จะมีความต้องการจาก User ให้พัฒนาระบบที่สามารถนำข้อมูลจากฐานข้อมูลมาออกรายงาน หรือบันทึกในรูปแบบ PDF ได้ ระบบที่กำลังพัฒนาอยู่ขณะนี้ก็เช่นเดียวกัน มีความต้องการให้สร้าง E-Form บันทึกข้อมูลในฐานข้อมูล และสร้างไฟล์ PDF ที่มีการจัดรูปแบบเป็นหนังสือราชการ ได้แก่ บันทึกข้อความ ประกาศ ระเบียบ คำสั่ง เป็นต้น จากนั้นจึงนำไฟล์ PDF ที่ได้ไปใช้ลงนามด้วย Digital Signature และดำเนินการอื่นๆ ต่อได้

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

จากการศึกษาและลองผิดลองถูกก็ได้แนวทางในการพัฒนาดังนี้

1. สร้างไฟล์ HTML และจัดรูปแบบแสดงผลข้อมูลด้วย CSS ให้เหมือนกระดาษ
2. ใช้ Add-on ของ iText7 ชื่อ iText7.pdfhtml ช่วยแปลงจาก HTML เป็น PDF
3. บันทึกไฟล์ PDF บนเซิร์ฟเวอร์ หรือแสดงผลผ่าน Browser

ตัวอย่างการพัฒนาด้วย Blazor Server Application

1. เปิด Visual Studio 2019 และสร้าง Project ใหม่ เลือก Blazor Server App คลิก Next ระบุโฟลเดอร์บันทึก Project จากนั้น ระบุ Target Framework เป็น .NET 5.0 คลิก Create

1. ติดตั้ง Add-on ชื่อ itext7.pdfhtml จาก NuGet โดยไปที่เมนู Project -> Manage NuGet Packages
2. คลิก Browse และค้นหา itext7.pdfhtml เลือกเวอร์ชั่นล่าสุด (3.0.4) และคลิก Install

1. สร้างไฟล์ HTML จัดรูปแบบข้อมูลด้วย CSS เก็บไว้ในโฟลเดอร์ wwwroot ในที่นี้สร้างไฟล์ชื่อ doc1.html และระบุ style sheet ไว้ในโฟลเดอร์ css

1. เปิดไฟล์ Pages/Index.razor เขียนโค้ดดังนี้
   5.1 @using iText.Html2pdf
   เพื่อให้สามารถเรียกใช้งาน Ad-on ได้
   5.2 @using System.IO
   เพื่อให้สามารถเขียนไฟล์ได้
   5.3 กำหนด onclick event ของปุ่ม ให้ทำฟังก์ชั่น CreatePDF
   5.4 public static string SRC = $”{BASEURI}doc1.html”;
   ระบุไฟล์ HTML ต้นทางที่ต้องการแปลงเป็น PDF
   5.5 public static string DEST = $”{TARGET}doc1.pdf”;
   ระบุไฟล์ pdf บันทึกผลลัพธ์ของการแปลงไฟล์
   5.6 HtmlConverter.ConvertToPdf(new FileInfo(SRC), new FileInfo(DEST), properties);
   แปลงไฟล์ HTML เป็น PDF

1. คลิก รัน หรือกด F5 จะได้หน้าจอดังรูป

1. คลิก Create PDF ระบบจะสร้างไฟล์ชื่อ doc1.pdf ดังรูป

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