html2pdf.js ส่งออก HTML เป็นเอกสาร PDF บนเว็บเบราว์เซอร์

📄 การใช้งาน html2pdf.js แปลง HTML เป็น PDF บนเว็บ

1. html2pdf.js คืออะไร?

html2pdf.js เป็นไลบราโรี JavaScript ที่ช่วยให้เราสามารถ แปลงเนื้อหา HTML เป็นไฟล์ PDF ได้ง่าย โดยผสมความสามารถของ:

html2canvas → แปลง HTML เป็นภาพ
jsPDF → แปลงภาพเป็น PDF

ข้อดีคือใช้ง่าย ไม่ต้องติดตั้ง Server Side และทำงานได้บน Browser โดยตรง

2. วิธีติดตั้ง

คุณสามารถโหลดผ่าน CDN ได้เลย:

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

ใช้ html2pdf.bundle.min.js เพราะรวมทั้ง html2canvas และ jsPDF ไว้แล้ว

3. ตัวอย่างการใช้งานพื้นฐาน

html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวอย่าง html2pdf.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>

<div id="content" style="padding:20px; border:1px solid #ccc; width:500px;">
  <h1>ใบเสร็จรับเงิน</h1>
  <p>ชื่อลูกค้า: นายสมชาย ใจดี</p>
  <p>จำนวนเงิน: 1,500 บาท</p>
  <p>วันที่: 11 สิงหาคม 2568</p>
</div>

<br>
<button id="download">ดาวน์โหลด PDF</button>

<script>
document.getElementById('download').addEventListener('click', function () {
  var element = document.getElementById('content');
  
  var opt = {
    margin:       10,
    filename:     'receipt.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2, useCORS: true },
    jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
  };
  
  html2pdf().set(opt).from(element).save();
});
</script>

</body>
</html>

4. อธิบาย Option หลัก

Option	ความหมาย
`margin`	ระยะขอบ PDF
`filename`	ชื่อไฟล์ PDF
`image.type`	ประเภทภาพ (`jpeg`/`png`)
`image.quality`	คุณภาพ (0–1)
`html2canvas.scale`	ค่าขยาย (scale) ยิ่งมากยิ่งคม
`html2canvas.useCORS`	โหลดรูปจากต่างโดเมนได้
`jsPDF.unit`	หน่วยวัด (`mm`, `cm`, `pt`, `in`)
`jsPDF.format`	ขนาดกระดาษ (`a4`, `letter`, หรือ [กว้าง,สูง])
`jsPDF.orientation`	แนวตั้ง (`portrait`) หรือแนวนอน (`landscape`)
`pagebreak`	ตั้งค่าแบ่งหน้า

5. การบังคับขึ้นหน้าใหม่ (Page Break)

นอกจาก Option แล้ว html2pdf.js ยังรองรับ CSS สำหรับตัดหน้า:

css
.page-break {
  page-break-before: always;
}

และใน HTML:

html
<div>เนื้อหาหน้าแรก</div>
<div class="page-break"></div>
<div>เนื้อหาหน้าสอง</div>

หรือใช้ใน JS:

javascript
pagebreak: { mode: ['css', 'avoid-all', 'legacy'] }

6. เคล็ดลับให้ PDF ชัดและพอดี

ตั้ง html2canvas.scale ≥ 2 เพื่อให้ภาพคม
ใช้ margin ให้พอดี A4 เช่น 10 หรือ [10, 15, 10, 15]
ถ้ารูปไม่ขึ้น ให้ตั้ง useCORS: true
ถ้าเนื้อหายาว ให้ใช้ pagebreak ช่วยตัดหน้า

7. สรุป

html2pdf.js เป็นตัวช่วยที่ดีมากในการทำ รายงาน, ใบเสร็จ, เกียรติบัตร, สัญญา ในเว็บโดยตรง ไม่ต้องพึ่ง Server และสามารถปรับแต่งได้หลายอย่าง

📄 ตัวอย่างโค้ดสร้าง PDF มากกว่า 1 หน้า

html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Demo html2pdf.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <style>
    body {
      font-family: Tahoma, sans-serif;
      background: #f5f5f5;
      text-align: center;
      padding: 20px;
    }
    #content {
      background: white;
      padding: 20px;
      width: 500px;
      margin: auto;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    h1 {
      color: #0066cc;
    }
    .page-break {
      page-break-before: always;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      background: #0066cc;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #004999;
    }
  </style>
</head>
<body>

<h2>Demo แปลง HTML เป็น PDF</h2>

<div id="content">
  <h1>ใบเสร็จรับเงิน</h1>
  <p><b>ชื่อลูกค้า:</b> นายสมชาย ใจดี</p>
  <p><b>จำนวนเงิน:</b> 1,500 บาท</p>
  <p><b>วันที่:</b> 11 สิงหาคม 2568</p>
  
  <div class="page-break"></div>
  <h2>หมายเหตุ</h2>
  <p>สินค้านี้ไม่สามารถคืนเงินได้</p>
</div>

<button id="download">📥 ดาวน์โหลด PDF</button>

<script>
document.getElementById('download').addEventListener('click', function () {
  var element = document.getElementById('content');
  
  var opt = {
    margin:       10,
    filename:     'receipt-demo.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
    jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak:    { mode: ['css', 'avoid-all'] }
  };
  
  html2pdf().set(opt).from(element).save();
});
</script>

</body>
</html>

🔹 อธิบายจุดสำคัญของ Demo

#content คือส่วน HTML ที่จะถูกแปลงเป็น PDF
margin: 10 กำหนดระยะขอบ PDF
html2canvas.scale: 2 ทำให้ PDF คมชัดขึ้น
.page-break ใช้บังคับให้ขึ้นหน้าใหม่ใน PDF
ปุ่ม "📥 ดาวน์โหลด PDF" เรียกฟังก์ชัน html2pdf().set(opt).from(element).save() เพื่อบันทึกไฟล์ทันที

🔹 เคล็ดลับ

1. ถ้า HTML ยาวเกิน 1 หน้า ให้ใช้ .page-break หรือ pagebreak option

2. ถ้ารูปไม่ขึ้นให้เพิ่ม useCORS: true และรูปต้องรองรับ CORS

3. ถ้าต้องการเปลี่ยนแนวนอน ให้เปลี่ยนเป็น:

javascript
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }

📄 HTML2PDF เปิด PDF Preview แทนการดาวน์โหลด

html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Demo html2pdf.js Preview</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <style>
    body {
      font-family: Tahoma, sans-serif;
      background: #f5f5f5;
      text-align: center;
      padding: 20px;
    }
    #content {
      background: white;
      padding: 20px;
      width: 500px;
      margin: auto;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    h1 {
      color: #0066cc;
    }
    .page-break {
      page-break-before: always;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      background: #0066cc;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #004999;
    }
  </style>
</head>
<body>

<h2>Demo แปลง HTML เป็น PDF (Preview Mode)</h2>

<div id="content">
  <h1>ใบเสร็จรับเงิน</h1>
  <p><b>ชื่อลูกค้า:</b> นายสมชาย ใจดี</p>
  <p><b>จำนวนเงิน:</b> 1,500 บาท</p>
  <p><b>วันที่:</b> 11 สิงหาคม 2568</p>
  
  <div class="page-break"></div>
  <h2>หมายเหตุ</h2>
  <p>สินค้านี้ไม่สามารถคืนเงินได้</p>
</div>

<button id="preview">👁‍🗨 ดูตัวอย่าง PDF</button>

<script>
document.getElementById('preview').addEventListener('click', function () {
  var element = document.getElementById('content');

  var opt = {
    margin:       10,
    filename:     'receipt-demo.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2, useCORS: true, backgroundColor: '#ffffff' },
    jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak:    { mode: ['css', 'avoid-all'] }
  };

  html2pdf().set(opt).from(element).toPdf().get('pdf').then(function (pdf) {
    const blob = pdf.output('blob');
    const url = URL.createObjectURL(blob);
    window.open(url); // เปิดในแท็บใหม่
  });
});
</script>

</body>
</html>

🔹 ความแตกต่างจากเวอร์ชันดาวน์โหลดทันที

ใช้ .toPdf().get('pdf') เพื่อดึง object PDF
แปลงเป็น Blob แล้วสร้าง URL ชั่วคราว ด้วย URL.createObjectURL(blob)
ใช้ window.open(url) เพื่อเปิด PDF ในแท็บใหม่แทนการบันทึกทันที

***************************************************