Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menjana PDF daripada HTML dalam Div menggunakan JavaScript?

Bagaimana untuk Menjana PDF daripada HTML dalam Div menggunakan JavaScript?

Linda Hamiltonasal: 2024-12-08 10:51:13712semak imbas

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

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>

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

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!

JavaScript css html print String if for while using class JS function this display input issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mencipta Objek JavaScript dengan Kekunci Dinamik daripada Pembolehubah?Artikel seterusnya：Bagaimanakah Saya Boleh Mencipta Objek JavaScript dengan Kekunci Dinamik daripada Pembolehubah?

Artikel berkaitan

Lihat lagi