cari

Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menjana PDF daripada Div HTML Menggunakan JavaScript dan jsPDF?

Bagaimanakah Saya Boleh Menjana PDF daripada Div HTML Menggunakan JavaScript dan jsPDF?

Linda Hamilton
Linda Hamiltonasal
2024-11-30 02:01:11444semak imbas

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

Janakan PDF daripada HTML dalam Div Menggunakan JavaScript

Masalah

Anda mempunyai kod HTML yang mengandungi div dengan id "pdf" yang anda mahu untuk mencetak ke fail PDF bernama "foobar.pdf" menggunakan JavaScript. Walau bagaimanapun, jspdf hanya menerima nilai rentetan dan tidak mempunyai fungsi untuk mencetak HTML.

Penyelesaian

Untuk membolehkan jsPDF mencetak HTML, anda perlu memasukkan pemalam berikut dalam anda projek:

  • jspdf.plugin.from_html.js
  • jspdf.plugin.split_text_to_size.js
  • jspdf.plugin.standard_fonts_metrics.>Selain itu, jika anda mahu abaikan elemen tertentu dalam HTML, anda boleh menandakannya dengan ID dan kemudian gunakan pengendali elemen khas dalam jsPDF untuk mengecualikan elemen tersebut daripada cetakan. Contohnya, kod HTML yang dikemas kini dengan elemen diabaikan:

Kod JavaScript
<!DOCTYPE html>
<html>
  <body>
    <p>

Kod JavaScript ini akan menjana PDF dengan kandungan div "pdf" dan membukanya dalam tetingkap baharu:

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

Anda hanya boleh menggunakan ID elemen untuk pengecualian dalam elemen pengendali. Pemilih kelas tidak disokong.
  • jsPDF mengabaikan gaya CSS, tetapi ia boleh memformatkan tajuk (h1, h2, dsb.) dan teks dalam nod teks. Elemen seperti textareas tidak disokong untuk pencetakan.

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

JavaScript css html print String if for format include using class function
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：Bagaimana untuk menambah ikon tersuai dalam React Native dalam 5Artikel seterusnya：Bagaimana untuk menambah ikon tersuai dalam React Native dalam 5

Artikel berkaitan

Lihat lagi