Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan data borang HTML sebagai teks dan hantar ke html2pdf?
Bagaimana untuk mendapatkan data borang HTML sebagai teks dan hantar ke html2pdf?
- WBOYke hadapan
- 2023-09-06 12:21:151412semak imbas
html2pdf ialah pakej JavaScript yang membolehkan pembangun menukar html kepada kanvas, pdf, imej dan banyak lagi. Ia mengambil html sebagai parameter dan menambahkannya ke pdf atau dokumen yang dikehendaki. Selain itu, ia membenarkan pengguna memuat turun dokumen selepas menambah kandungan html.
Di sini kami akan mengakses borang dan menambahkannya pada pdf menggunakan pakej npm html2pdf. Kami akan melihat contoh yang berbeza untuk menambah data borang ke pdf.
Tatabahasa
Pengguna boleh mengikuti sintaks berikut untuk menghantar data borang html sebagai teks dan menghantarnya ke html2pdf.
var element = document.getElementById('form');
html2pdf().from(element).save();
Dalam sintaks di atas, kami mengakses borang menggunakan id dan menambahkannya pada pdf menggunakan kaedah html2pdf().
Contoh 1 (tambahkan keseluruhan borang ke pdf)
Dalam contoh di bawah, kami mencipta borang dan menyatakan "dari" sebagai id. Selain itu, kami telah menambah beberapa elemen input pada borang. Dalam JavaScript, kami mengakses borang menggunakan idnya dan menyimpannya dalam pembolehubah "elemen".
Selepas itu, kami menggunakan kaedah html2pdf() untuk menambah borang pada pdf. Dalam output, pengguna boleh melihat bahawa apabila mereka mengklik pada butang hantar, ia memuat turun pdf dengan teg dan nilai input borang.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"> </script>
</head>
<body>
<h3> Using the <i> html2pdf </i> to create a pdf using the content of the form </h3>
<!-- creating a sample form with 3 to 4 input fields with labels -->
<form id = "form">
<label for = "name"> Name: </label>
<input type = "text" id = "name" name = "name"> <br> <br>
<label for = "email"> Email: </label>
<input type = "email" id = "email" name = "email"> <br> <br>
<input type = "button" value = "Submit" onclick = "generatePDF()">
</form>
<script>
// function to generate a pdf from the form using html2pdf
function generatePDF() {
// get the form element
var element = document.getElementById('form');
// create a new pdf using the form element
html2pdf().from(element).save();
}
</script>
</body>
</html>
Contoh 2 (hanya tambah kandungan borang pada pdf)
Dalam contoh di bawah, kami akan menambah kandungan borang pada PDF, bukannya keseluruhan borang. Kami telah mencipta borang dan menambah beberapa medan input seperti dalam contoh pertama.
Dalam JavaScript, kami menggunakan id setiap input untuk mengakses nilainya. Selepas itu, kami mencipta elemen "div" menggunakan JavaScript dan menambah kandungan borang pada HTML elemen div menggunakan atribut "innerHTML".
Seterusnya, kami menggunakan kandungan elemen div untuk mencipta pdf.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"> </script>
</head>
<body>
<h3> Using the <i> html2pdf </i> to create a pdf using the content of the form </h3>
<!-- creating a sample form with 3 to 4 input fields with labels -->
<form id = "form">
<label for = "name"> Name: </label>
<input type = "text" id = "name" name = "name"> <br> <br>
<label for = "comment"> Comment: </label>
<input type = "comment" id = "comment" name = "comment"> <br> <br>
<input type = "button" value = "Submit" onclick = "getContentInPDF()">
</form>
<script>
function getContentInPDF() {
// access form elements one by one
var name = document.getElementById('name').value;
var comment = document.getElementById('comment').value;
// create a single html element by adding form data
var element = document.createElement('div');
element.innerHTML = '<h1>Form Data</h1>' +
'<p>Name: ' + name + '</p>' +
'<p>Comment: ' + comment + '</p>';
// create a new pdf using the form element
html2pdf().from(element).save();
}
</script>
</body>
</html>
Pengguna belajar menggunakan html2pdf untuk menambah data borang ke pdf. Kami hanya perlu memanggil kaedah html2pdf() dan ia akan mengendalikan segala-galanya. Dalam contoh pertama kami menambah keseluruhan borang dengan nilai input dalam pdf, dalam contoh kedua kami mengekstrak data borang dan menambahkannya ke pdf.
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan data borang HTML sebagai teks dan hantar ke html2pdf?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!