1. เพิ่มไลบรารี html2canvas และ jspdf โดยโหลดไลบรารี ผ่าน CDN ในส่วน <head> ของ HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
2. เพิ่มปุ่มสำหรับสร้าง pdf <button> ที่มี id="openpdf" ซึ่งเมื่อกดปุ่มจะทำการสร้างไฟล์ pdf
<button id="openpdf">Open PDF</button>
3. สร้าง <div> ที่มี id="pdf" ครอบส่วนที่ต้องการแปลงเป็น PDF
<div id="pdf">
<h1>Hello, world!</h1>
<p>This is a paragraph that will be converted to an PDF.</p>
<img src="https://semicon.github.io/Pioneer-University/imgs/home.jpeg" alt="Sample Image"> </div>
ตัวอย่างการใช้งานในโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to PDF with Images</title>
<style>
#pdf {
padding: 10px;
background: #f5da55;
}
img {
max-width: 100%;
height: auto; /* Ensure images are responsive */
}
</style>
</head>
<body>
<div id="pdf">
<h1>Hello, world!</h1>
<p>This is a paragraph that will be converted to PDF.</p>
<center>
<img src="https://semicon.github.io/img/exempleimage.jpg" alt="Sample Image 1" class="sampleImage"><br>
<img src="https://semicon.github.io/img/img-01.jpg" alt="Sample Image 2" class="sampleImage"><br>
<img src="https://semicon.github.io/img/img-04.jpg" alt="Sample Image 3" class="sampleImage">
</center>
</div>
<button id="openpdf">Open PDF</button>
<!-- Importing the latest versions of html2canvas and jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
document.getElementById('openpdf').addEventListener('click', function () {
const images = document.querySelectorAll('.sampleImage');
let loadedCount = 0;
images.forEach(image => {
if (image.complete) {
handleImageLoad(image);
} else {
image.onload = () => handleImageLoad(image);
}
});
function handleImageLoad(image) {
loadedCount++;
if (loadedCount === images.length) {
images.forEach(image => {
imageToBase64(image.src, base64Img => {
image.src = base64Img;
});
});
generatePDF();
}
}
});
function imageToBase64(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
function generatePDF() {
html2canvas(document.getElementById('pdf'), {
useCORS: true, // Ensure cross-origin images are handled
logging: true, // Enable logging for debugging
onclone: function(clonedDoc) {
clonedDoc.getElementById('pdf').style.display = 'block';
}
}).then(function (canvas) {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; // Width of A4 in mm
const pageHeight = 297; // Height of A4 in mm
const imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
let position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft > 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
// Opening the generated PDF in a new window
window.open(doc.output('bloburl'), '_blank');
});
}
</script>
</body>
</html>