Bagaimana untuk Menjana PDF daripada HTML dalam Div menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk Menjana PDF daripada HTML dalam Div menggunakan JavaScript?

Linda Hamilton

Lepaskan： 2024-12-08 10:51:13

asal

653 orang telah melayarinya

How to Generate a PDF from HTML within a Div using JavaScript?

Janakan PDF daripada HTML dalam div menggunakan Javascript

Tugas yang perlu diselesaikan ialah menukar kandungan div dengan ID "pdf" ke dalam dokumen PDF. Dokumen PDF ini mesti dimuat turun secara automatik dengan nama fail "foobar.pdf."

Walaupun jspdf biasanya digunakan untuk penjanaan PDF, pengehadan fungsi teksnya memberikan cabaran. Ia hanya menerima nilai rentetan, manakala input HTML diperlukan. Untuk menangani isu ini, pemalam, seperti jspdf.plugin.from_html.js dan jspdf.plugin.split_text_to_size.js, diperlukan. Begini cara menggunakan pemalam ini untuk mencapai hasil yang diingini:

Mulakan dengan memasukkan skrip yang diperlukan ke dalam projek anda:

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Salin selepas log masuk

Jika elemen tertentu memerlukan untuk dikecualikan daripada PDF, mereka mesti diberikan ID dan dikenal pasti dalam pengendali elemen khas jsPDF. Contohnya, untuk mengecualikan elemen dengan ID "ignorePDF", ubah suai kod HTML seperti berikut:

<!DOCTYPE html>
<html>
  <body>
    <p>

Salin selepas log masuk

Kod JavaScript berikut akan menjana PDF dan memaparkannya dalam pop timbul tetingkap:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Salin selepas log masuk

Kaedah ini akan mencipta PDF yang mengandungi teks "cetak ini ke pdf."

Adalah penting untuk ambil perhatian bahawa pengendali elemen khas terutamanya mengendalikan ID dalam versi semasa. Akibatnya, menggunakan pemilih kelas (cth., '.ignorePDF') tidak akan menghasilkan hasil yang dimaksudkan.

Selain itu, jsPDF tidak mempunyai sokongan untuk penggayaan CSS dan hanya akan mencetak teks dalam nod teks. Oleh itu, nilai daripada textarea dan elemen serupa tidak akan disertakan dalam PDF.

Atas ialah kandungan terperinci Bagaimana untuk Menjana PDF daripada HTML dalam Div menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!