โปรแกรมแก้ไข Downcodes นำเสนอบทช่วยสอนเกี่ยวกับวิธีใช้ JavaScript และ PHP เพื่อแปลงหน้าเว็บ HTML เป็นไฟล์ PDF บทความนี้จะอธิบายรายละเอียดสองวิธี: การใช้ไลบรารี JavaScript jsPDF และการใช้ไลบรารี PHP TCPDF หรือ mPDF ไลบรารี jsPDF อนุญาตให้แปลงโดยตรงบนฝั่งไคลเอ็นต์ ในขณะที่ไลบรารี PHP ต้องมีการประมวลผลบนฝั่งเซิร์ฟเวอร์ เราจะเน้นไปที่การอธิบายวิธีใช้ jsPDF และจัดเตรียมตัวอย่างโค้ด ซึ่งครอบคลุมขั้นตอนของการแนะนำไลบรารี การประมวลผลเนื้อหา HTML การสร้างอินสแตนซ์ PDF การปรับรูปแบบ การบันทึกไฟล์ ฯลฯ นอกจากนี้ เรายังจะแนะนำวิธีการแปลงและฟังก์ชันขั้นสูงโดยใช้ PHP อีกด้วย . การนำไปปฏิบัติ เช่น การเพิ่มรูปภาพ ลายน้ำ ส่วนหัวและส่วนท้าย เป็นต้น ไม่ว่าคุณจะเลือกวิธีใด บทความนี้จะช่วยให้คุณแปลง HTML เป็น PDF ได้อย่างมีประสิทธิภาพ

การแปลงหน้าเว็บเป็น PDF เป็นข้อกำหนดทั่วไป ซึ่งช่วยให้เราสามารถบันทึกเนื้อหาเว็บไซต์ในรูปแบบคงที่ได้ การใช้ JavaScript หรือ PHP เพื่อแปลงหน้าเว็บ HTML เป็น PDF รวมถึง: การใช้ไลบรารี JavaScript และการใช้ไลบรารี PHP ในบรรดาเครื่องมือการแปลงเหล่านี้ ไลบรารี JavaScript เช่น jsPDF และ html2pdf.js ได้รับความนิยมอย่างมาก ในขณะที่ PHP มีไลบรารีเช่น TCPDF หรือ mPDF เราจะมุ่งเน้นไปที่การใช้ไลบรารี jsPDF ของ JavaScript เพื่อให้ได้การแปลง เนื่องจากไลบรารี jsPDF ให้การสนับสนุนลูกค้าที่ดี ใช้งานง่าย และสามารถทำการแปลงให้เสร็จสิ้นได้โดยไม่ต้องสื่อสารกับเซิร์ฟเวอร์

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

1. การแนะนำห้องสมุด JSPDF

เพื่อเริ่มกระบวนการแปลง คุณต้องนำเข้า jsPDF ลงในหน้าเว็บของคุณก่อน คุณสามารถดาวน์โหลดไลบรารี jsPDF และผ่านได้โดยตรง

หรือติดตั้งโดยใช้ npm:

npm ติดตั้ง jspdf

จากนั้นนำเข้าลงในไฟล์ JavaScript ของคุณ:

นำเข้า { jsPDF } จาก jspdf;

2. เลือกและแก้ไขเนื้อหา HTML

ก่อนที่จะสร้าง PDF คุณอาจต้องการแก้ไข HTML เพื่อให้แน่ใจว่าไฟล์ PDF ที่แปลงแล้วตรงตามความต้องการของคุณ ตัวอย่างเช่น คุณอาจต้องซ่อนองค์ประกอบบางอย่างของหน้าและเก็บเฉพาะเนื้อหาหลักเท่านั้น

// รับองค์ประกอบ HTML ที่ต้องแปลง

องค์ประกอบ const = document.getElementById('content-to-pdf');

// แก้ไขเนื้อหา HTML เช่น การซ่อนองค์ประกอบที่ไม่จำเป็น

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. สร้างอินสแตนซ์ JSPDF และแปลง HTML

สร้างอินสแตนซ์ jsPDF ใหม่และใช้ API ที่ได้รับจาก jsPDF เพื่ออ่านองค์ประกอบ HTML และแปลงเป็นรูปแบบ PDF

const doc = jsPDF ใหม่ ();

// สมมติว่าคุณต้องการให้เพจแสดงผลในรูปแบบ PDF ขนาด A4

doc.html(document.body, {

โทรกลับ: ฟังก์ชั่น (doc) {

doc.save('หน้าเว็บ.pdf');

-

x: 10,

ย: 10,

ความกว้าง: 190,

หน้าต่างกว้าง: document.body.scrollWidth

-

4. ปรับรูปแบบและเค้าโครงของ PDF

ในระหว่างกระบวนการแปลง คุณอาจต้องปรับรูปแบบและเค้าโครงของ PDF เช่น ขนาดหน้า ระยะขอบ หรือจำเป็นต้องพิมพ์ในแนวนอน ฯลฯ

const doc = jsPDF ใหม่ ({

ปฐมนิเทศ: 'p', // แนวตั้ง

หน่วย: 'mm', // หน่วยเป็นมิลลิเมตร

รูปแบบ: 'a4', // รูปแบบเป็นกระดาษ A4

-

5. บันทึกไฟล์ PDF

เมื่อเนื้อหา HTML ถูกแปลงเป็น PDF แล้ว คุณสามารถใช้เมธอด save() เพื่อบันทึกไฟล์ หรือประมวลผลข้อมูล PDF ที่เป็นผลลัพธ์ได้

doc.save('converted-webpage.pdf'); // บันทึกไฟล์ PDF

6. ใช้ PHP เพื่อแปลง HTML เป็น PDF

หากคุณต้องการแปลง HTML เป็น PDF บนฝั่งเซิร์ฟเวอร์ คุณสามารถใช้ไลบรารี PHP เช่น TCPDF หรือ mPDF หากต้องการใช้ไลบรารีเหล่านี้ คุณต้องแนะนำไลบรารีเหล่านี้ในสภาพแวดล้อม PHP ของคุณก่อน ซึ่งโดยปกติจะผ่านทาง Composer

ผู้แต่งต้องการ tecnickcom/tcpdf

จากนั้นสร้างอ็อบเจ็กต์ TCPDF ในสคริปต์ PHP และใช้วิธีการที่ได้รับจากอ็อบเจ็กต์เพื่อแปลงโค้ด HTML เป็นรูปแบบ PDF

need_once('tcpdf_include.php');

//สร้างเอกสาร PDF ใหม่

$pdf = TCPDF ใหม่(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, จริง, 'UTF-8', เท็จ);

//ตั้งค่าข้อมูลเอกสาร

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('ชื่อของคุณ');

$pdf->SetTitle('TCPDF ตัวอย่าง 001');

$pdf->SetSubject('TCPDF บทช่วยสอน');

$pdf->SetKeywords('TCPDF, PDF, ตัวอย่าง, ทดสอบ, คำแนะนำ');

//เพิ่มหน้า

$pdf->AddPage();

//กำหนดเนื้อหา

$html = '

ยินดีต้อนรับสู่ TCPDF!

-

$pdf->writeHTML($html, true, false, true, false, '');

// ส่งออก PDF

$pdf->Output('example_001.pdf', 'I');

7. การจัดการสไตล์และแบบอักษร

เมื่อจัดการกับการแปลง PDF คุณอาจต้องการพิจารณาสไตล์และฟอนต์ในเอกสารเพื่อให้แน่ใจว่าไฟล์ PDF ที่ได้จะคงสไตล์ของเนื้อหาเว็บไว้

ทั้ง jsPDF และ TCPDF ให้การสนับสนุนขั้นพื้นฐานสำหรับสไตล์ คุณสามารถใช้สไตล์ CSS ได้โดยตรงใน HTML หรือใช้สไตล์เมื่อสร้าง PDF อย่างไรก็ตาม เนื่องจาก PDF ไม่ได้แสดงผลเหมือนกับหน้าเว็บทุกประการ จึงอาจมีความแตกต่างเล็กน้อย สำหรับ jsPDF การสนับสนุน CSS สามารถปรับปรุงได้ผ่านปลั๊กอิน ด้วย TCPDF คุณจะต้องปรับ CSS อย่างระมัดระวังเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

doc.setFont(เฮลเวติกา);

doc.setFontStyle(ตัวหนา);

doc.setFontSize(16);

doc.text(สวัสดีชาวโลก!, 10, 10);

$html = '

-

$pdf->writeHTML($html, true, false, true, false, '');

8. ฟังก์ชั่นขั้นสูงและการปรับแต่ง

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

jsPDF มีวิธีการต่างๆ มากมายเพื่อปรับปรุงการทำงานของ PDF เช่น addImage() สำหรับการเพิ่มรูปภาพ setProperties() สำหรับการตั้งค่าคุณสมบัติของเอกสาร เป็นต้น

//เพิ่มรูปภาพ

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF ยังมีฟังก์ชันอันทรงพลังในการจัดการเนื้อหาขั้นสูงของ PDF

// ตั้งค่าส่วนหัว

$pdf->setHeaderData('', 0, 'หัวข้อ', 'ส่วนหัว', อาร์เรย์(0,64,255), อาร์เรย์(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

//เพิ่มลายน้ำ

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

//คืนความโปร่งใสเต็มรูปแบบ

$pdf->SetAlpha(1);

โดยสรุป การใช้ JavaScript หรือ PHP เพื่อแปลงหน้าเว็บ HTML เป็นไฟล์ PDF เกี่ยวข้องกับการเลือกไลบรารีที่เหมาะสม การประมวลผลเนื้อหาหน้าเว็บ การปรับเค้าโครง PDF และการใช้ฟังก์ชันขั้นสูงที่ไลบรารีมีให้เพื่อให้บรรลุข้อกำหนดการปรับแต่งที่ซับซ้อน ไม่ว่าคุณจะเลือก jsPDF บนฝั่งไคลเอ็นต์หรือ TCPDF บนฝั่งเซิร์ฟเวอร์ ขั้นตอนและวิธีการใช้งานพื้นฐานจะคล้ายกัน ในระหว่างการใช้งานเฉพาะ จำเป็นต้องเลือกเครื่องมือและวิธีการที่เหมาะสมที่สุดตามความต้องการและสภาพแวดล้อมที่แท้จริงของโครงการ

คำถามที่พบบ่อยที่เกี่ยวข้อง:

1. วิธีแปลงเว็บเพจ HTML เป็น PDF โดยใช้ JavaScript

คุณสามารถใช้ไลบรารี jsPDF เพื่อแปลงหน้าเว็บ HTML เป็น PDF ไลบรารีนี้อนุญาตให้คุณสร้างไฟล์ PDF ใน JavaScript ส่วนหน้า คุณสามารถทำได้โดยแสดงเนื้อหาขององค์ประกอบ HTML บน Canvas จากนั้นใช้ jsPDF เพื่อแปลง Canvas เป็นไฟล์ PDF ด้วยวิธีนี้คุณสามารถสร้างไฟล์ PDF บนไคลเอนต์ได้โดยตรง

2. วิธีแปลงหน้าเว็บ HTML เป็น PDF โดยใช้ PHP

วิธีทั่วไปในการแปลงหน้าเว็บ HTML เป็น PDF โดยใช้ PHP คือการใช้ไลบรารี TCPDF หรือ mPDF ไลบรารีทั้งสองสามารถสร้างไฟล์ PDF บนฝั่งเซิร์ฟเวอร์ได้ คุณเพียงแค่ต้องติดตั้งไลบรารีที่เกี่ยวข้องบนเซิร์ฟเวอร์ จากนั้นใช้ PHP เพื่อแสดงหน้าเว็บ HTML เป็นไฟล์ PDF

3. นอกจาก jsPDF, TCPDF และ mPDF แล้ว มีเครื่องมืออะไรอีกบ้างที่สามารถแปลงหน้าเว็บ HTML เป็น PDF ได้

นอกจาก jsPDF, TCPDF และ mPDF ทั่วไปแล้ว ยังมีเครื่องมืออื่นๆ ที่สามารถแปลงหน้าเว็บ HTML เป็น PDF ได้ เช่น: wkhtmltopdf, PhantomJS เป็นต้น เครื่องมือเหล่านี้สามารถทำงานในพื้นหลังเพื่อแสดงผลหน้าเว็บ HTML เป็นไฟล์ PDF คุณสามารถเลือกเครื่องมือที่เหมาะสมกับคุณที่สุดตามความต้องการของคุณ เพื่อทราบถึงฟังก์ชันการแปลงหน้าเว็บเป็น PDF

ฉันหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเชี่ยวชาญทักษะการแปลง HTML เป็น PDF บรรณาธิการของ Downcodes ขอให้คุณมีความสุขกับการเขียนโปรแกรม!