HTML2Canvas, bir web sayfasının görüntüsünü almak için kullanılan bir JavaScript kütüphanesidir. Bu kütüphane, web geliştiricilerin web sayfalarının görüntüsünü alarak PDF olarak kaydetmelerine olanak tanır.
Kütüphaneyi kullanarak bir web sayfasının görüntüsünü PDF olarak kaydetmek oldukça basittir. İşlemi gerçekleştirmek için öncelikle html2canvas kütüphanesini projenize eklemeniz gerekir. Bu, <script> etiketiyle kütüphaneyi doğrudan HTML dosyanıza ekleyebileceğiniz anlamına gelir veya npm veya yarn gibi paket yöneticilerini kullanarak kütüphaneyi yükleyebilirsiniz.
Ardından, PDF olarak kaydetmek istediğiniz HTML elementini belirleyin. Bu element, web sayfasının belirli bir bölümü veya tamamı olabilir.
html2canvas fonksiyonunu kullanarak belirlediğiniz HTML elementinin görüntüsünü alın. Bu fonksiyon, belirtilen elementin ekran görüntüsünü alır ve bir canvas elementi olarak döndürür.
Son olarak, alınan görüntüyü PDF olarak kaydedin. Bu adımda, genellikle başka bir kütüphane olan jsPDF’i kullanarak PDF oluşturulur ve kaydedilir. Bu kütüphane, PDF belgelerini oluşturmak ve işlemek için kullanılır.
Tüm bu adımları uygulamak için basit bir kod örneği aşağıda verilmiştir:<!DOCTYPE html> <html> <head> <title>HTML to PDF</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> </head> <body> <div id="content"> <!-- PDF'e dönüştürmek istediğiniz HTML içeriği --> <h1>Hello, World!</h1> <p>This is a test PDF.</p> </div> <button onclick="convertToPDF()">Convert to PDF</button> <script> function convertToPDF() { const element = document.getElementById('content'); html2canvas(element).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('test.pdf'); }); } </script> </body> </html>
Bu örnek, HTML içeriğini PDF olarak kaydetmek için html2canvas ve jsPDF kütüphanelerini kullanan basit bir örnektir. Bu kod, HTML dosyasının içine yerleştirilerek hızla kullanılabilir.
İlk Yorumu Siz Yapın