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

Bagaimana untuk Menjana PDF daripada Div HTML Menggunakan JavaScript?

Mary-Kate Olsen

Lepaskan： 2024-12-04 03:16:10

asal

320 orang telah melayarinya

How to Generate a PDF from an HTML Div Using JavaScript?

Menjana PDF daripada Kandungan HTML dalam Div Menggunakan JavaScript

Untuk menjana fail PDF yang mengandungi kandungan elemen div HTML tertentu, kami boleh menggunakan perpustakaan JavaScript jsPDF. Walau bagaimanapun, memandangkan fungsi teks jsPDF hanya menerima rentetan, kami perlu memasukkan pemalam tambahan untuk mendayakan pemaparan HTML.

Langkah 1: Sertakan Pemalam yang Diperlukan

Dari tapak web jsPDF, muat turun versi terkini jsPDF dan masukkan skrip berikut dalam anda projek:

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.s plit_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Langkah 2: Abaikan Elemen Yang Tidak Diingini

Jika anda ingin mengecualikan elemen tertentu daripada PDF, berikan mereka ID unik dalam kod HTML anda. Kemudian, anda boleh menggunakan pengendali elemen khas jsPDF untuk mengabaikan elemen ini semasa penukaran.

Sebagai contoh, untuk mengabaikan elemen dengan ID "ignorePDF":

<p>

Salin selepas log masuk

Langkah 3: Tukar HTML ke PDF

Buat dokumen jsPDF baharu dan tentukan fungsi pengendali elemen untuk mengabaikan elemen yang anda ditanda.

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
  }
);

Salin selepas log masuk

Langkah 4: Output PDF

Untuk memaparkan PDF yang dijana dalam tetingkap baharu, gunakan kod berikut:

doc.output("dataurlnewwindow");

Salin selepas log masuk

Ini akan dimuat turun secara automatik fail PDF bernama "foobar.pdf" dengan kandungan elemen div yang anda tentukan.

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