Bagaimana untuk Mengeksport PDF dengan Rendering CSS dan Imej yang Betul Menggunakan jspdf dan HTML2Canvas?

Mengeksport PDF dengan CSS Rendering Menggunakan jspdf dan HTML2Canvas

Isu: Apabila menggunakan jspdf.debug.js untuk mengeksport data daripada tapak web, pengguna menghadapi masalah dengan CSS tidak dipaparkan dalam PDF yang dieksport dan imej kelihatan kosong.

Penyelesaian:

jspdf tidak menyokong pemaparan CSS secara asli . Walau bagaimanapun, ini boleh diselesaikan dengan memasukkan HTML2Canvas ke dalam proses.

HTML2Canvas membolehkan anda menukar elemen HTML kepada elemen kanvas, yang kemudiannya boleh ditambahkan pada PDF menggunakan kaedah addHTML jspdf.

Kod:

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

Pelaksanaan:

Selepas menambah HTML2Canvas JS, gantikan kaedah fromHTML jspdf dengan addHTML(). Pemilih ElementYouWantToConvertToPdf hendaklah menunjuk kepada elemen HTML yang ingin anda eksport.

Nota: Jika anda tidak menemui kaedah addHTML(), rujuk dokumentasi untuk penjelasan lanjut.

Pertimbangan Tambahan:

• Ingat untuk menambah skrip HTML2Canvas pada fail HTML anda.
• Pastikan bahawa dimensi PDF dan lebar elemen ditetapkan dengan sewajarnya untuk mengelakkan pemotongan.
• Uji kod anda dengan teliti untuk memastikan ia memenuhi keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengeksport PDF dengan Rendering CSS dan Imej yang Betul Menggunakan jspdf dan HTML2Canvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!