Bagaimana untuk Membuat CSS dan Imej dalam PDF Menggunakan JSPDF dan Html2Canvas?

Memaparkan CSS dan Imej dengan JSPDF

Apabila mengeksport data ke PDF menggunakan jspdf.debug.js, adalah perkara biasa untuk menghadapi masalah dengan pemaparan CSS dan imej. Artikel ini menyediakan penyelesaian untuk menyelesaikan masalah ini.

Pertama, jspdf tidak menyokong pemaparan CSS secara asli dalam PDF yang dieksport. Untuk mengatasi had ini, adalah disyorkan untuk menggunakan Html2Canvas.

Untuk melaksanakan Html2Canvas, ikut langkah berikut:

1. Sertakan pustaka JavaScript Html2Canvas dalam projek anda.
2. Gantikan pdf.fromHTML() dengan pdf.addHTML() dalam kod anda. Kaedah ini menerima elemen HTML untuk ditukar sebagai parameter pertama dan fungsi panggil balik sebagai parameter kedua.

Berikut ialah versi terkini kod anda dengan penyepaduan Html2Canvas:

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
    pdf.save('Test.pdf');
});

Dengan menggunakan Html2Canvas, anda boleh menukar elemen halaman web dengan berkesan, termasuk gaya dan imej CSS, kepada PDF.

Atas ialah kandungan terperinci Bagaimana untuk Membuat CSS dan Imej dalam PDF Menggunakan JSPDF dan Html2Canvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!