hujung hadapan web
html tutorial
Bagaimana untuk mendapatkan data borang HTML sebagai teks dan hantar ke html2pdf?
Bagaimana untuk mendapatkan data borang HTML sebagai teks dan hantar ke html2pdf?
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 id="Using-the-i-html-pdf-i-to-create-a-pdf-using-the-content-of-the-form"> 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 id="Using-the-i-html-pdf-i-to-create-a-pdf-using-the-content-of-the-form"> 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 id="Form-Data">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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Gunakan ddrescue untuk memulihkan data pada Linux
Mar 20, 2024 pm 01:37 PM
DDREASE ialah alat untuk memulihkan data daripada fail atau peranti sekat seperti cakera keras, SSD, cakera RAM, CD, DVD dan peranti storan USB. Ia menyalin data dari satu peranti blok ke peranti lain, meninggalkan blok data yang rosak dan hanya memindahkan blok data yang baik. ddreasue ialah alat pemulihan yang berkuasa yang automatik sepenuhnya kerana ia tidak memerlukan sebarang gangguan semasa operasi pemulihan. Selain itu, terima kasih kepada fail peta ddasue, ia boleh dihentikan dan disambung semula pada bila-bila masa. Ciri-ciri utama lain DDREASE adalah seperti berikut: Ia tidak menimpa data yang dipulihkan tetapi mengisi jurang sekiranya pemulihan berulang. Walau bagaimanapun, ia boleh dipotong jika alat itu diarahkan untuk melakukannya secara eksplisit. Pulihkan data daripada berbilang fail atau blok kepada satu
Sumber terbuka! Di luar ZoeDepth! DepthFM: Anggaran kedalaman monokular yang cepat dan tepat!
Apr 03, 2024 pm 12:04 PM
0. Apakah fungsi artikel ini? Kami mencadangkan DepthFM: model anggaran kedalaman monokular generatif yang serba boleh dan pantas. Sebagai tambahan kepada tugas anggaran kedalaman tradisional, DepthFM juga menunjukkan keupayaan terkini dalam tugas hiliran seperti mengecat kedalaman. DepthFM cekap dan boleh mensintesis peta kedalaman dalam beberapa langkah inferens. Mari kita baca karya ini bersama-sama ~ 1. Tajuk maklumat kertas: DepthFM: FastMonocularDepthEstimationwithFlowMatching Pengarang: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr
Cara menggunakan fungsi penapis Excel dengan berbilang syarat
Feb 26, 2024 am 10:19 AM
Jika anda perlu tahu cara menggunakan penapisan dengan berbilang kriteria dalam Excel, tutorial berikut akan membimbing anda melalui langkah-langkah untuk memastikan anda boleh menapis dan mengisih data anda dengan berkesan. Fungsi penapisan Excel sangat berkuasa dan boleh membantu anda mengekstrak maklumat yang anda perlukan daripada sejumlah besar data. Fungsi ini boleh menapis data mengikut syarat yang anda tetapkan dan memaparkan hanya bahagian yang memenuhi syarat, menjadikan pengurusan data lebih cekap. Dengan menggunakan fungsi penapis, anda boleh mencari data sasaran dengan cepat, menjimatkan masa dalam mencari dan menyusun data. Fungsi ini bukan sahaja boleh digunakan pada senarai data ringkas, tetapi juga boleh ditapis berdasarkan berbilang syarat untuk membantu anda mencari maklumat yang anda perlukan dengan lebih tepat. Secara keseluruhan, fungsi penapisan Excel adalah sangat berguna
Google gembira: prestasi JAX mengatasi Pytorch dan TensorFlow! Ia mungkin menjadi pilihan terpantas untuk latihan inferens GPU
Apr 01, 2024 pm 07:46 PM
Prestasi JAX, yang dipromosikan oleh Google, telah mengatasi Pytorch dan TensorFlow dalam ujian penanda aras baru-baru ini, menduduki tempat pertama dalam 7 penunjuk. Dan ujian tidak dilakukan pada TPU dengan prestasi JAX terbaik. Walaupun dalam kalangan pembangun, Pytorch masih lebih popular daripada Tensorflow. Tetapi pada masa hadapan, mungkin lebih banyak model besar akan dilatih dan dijalankan berdasarkan platform JAX. Model Baru-baru ini, pasukan Keras menanda aras tiga hujung belakang (TensorFlow, JAX, PyTorch) dengan pelaksanaan PyTorch asli dan Keras2 dengan TensorFlow. Pertama, mereka memilih satu set arus perdana
Bagaimana untuk menghantar fail kepada orang lain di TikTok? Bagaimana untuk memadam fail yang dihantar kepada orang lain?
Mar 22, 2024 am 08:30 AM
Di Douyin, pengguna bukan sahaja boleh berkongsi butiran kehidupan dan bakat mereka, tetapi juga berinteraksi dengan pengguna lain. Dalam proses ini, kadangkala kita perlu menghantar fail kepada pengguna lain, seperti gambar, video, dll. Jadi, bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Buka Douyin dan masukkan antara muka sembang di mana anda ingin menghantar fail. 2. Klik tanda "+" dalam antara muka sembang dan pilih "Fail". 3. Dalam pilihan fail, anda boleh memilih untuk menghantar gambar, video, audio dan fail lain. Selepas memilih fail yang ingin anda hantar, klik "Hantar". 4. Tunggu pihak lain menerima fail anda Setelah pihak lain menerimanya, fail tersebut akan berjaya dipindahkan. 2. Bagaimana untuk memadam fail yang dihantar kepada orang lain di Douyin? 1. Buka Douyin dan masukkan teks yang anda hantar.
Kelajuan Internet Data Selular Perlahan pada iPhone: Pembetulan
May 03, 2024 pm 09:01 PM
Menghadapi ketinggalan, sambungan data mudah alih perlahan pada iPhone? Biasanya, kekuatan internet selular pada telefon anda bergantung pada beberapa faktor seperti rantau, jenis rangkaian selular, jenis perayauan, dsb. Terdapat beberapa perkara yang boleh anda lakukan untuk mendapatkan sambungan Internet selular yang lebih pantas dan boleh dipercayai. Betulkan 1 – Paksa Mulakan Semula iPhone Kadangkala, paksa memulakan semula peranti anda hanya menetapkan semula banyak perkara, termasuk sambungan selular. Langkah 1 – Hanya tekan kekunci naikkan kelantangan sekali dan lepaskan. Seterusnya, tekan kekunci Turun Kelantangan dan lepaskannya semula. Langkah 2 - Bahagian seterusnya proses adalah untuk menahan butang di sebelah kanan. Biarkan iPhone selesai dimulakan semula. Dayakan data selular dan semak kelajuan rangkaian. Semak semula Betulkan 2 – Tukar mod data Walaupun 5G menawarkan kelajuan rangkaian yang lebih baik, ia berfungsi lebih baik apabila isyarat lemah
Daya hidup kecerdasan super membangkitkan! Tetapi dengan kedatangan AI yang mengemas kini sendiri, ibu tidak perlu lagi bimbang tentang kesesakan data
Apr 29, 2024 pm 06:55 PM
Saya menangis hingga mati. Dunia sedang membina model besar. Data di Internet tidak mencukupi. Model latihan kelihatan seperti "The Hunger Games", dan penyelidik AI di seluruh dunia bimbang tentang cara memberi makan data ini kepada pemakan yang rakus. Masalah ini amat ketara dalam tugas berbilang modal. Pada masa mereka mengalami kerugian, pasukan pemula dari Jabatan Universiti Renmin China menggunakan model baharu mereka sendiri untuk menjadi yang pertama di China untuk menjadikan "suapan data yang dijana model itu sendiri" menjadi kenyataan. Selain itu, ia merupakan pendekatan serampang dua mata dari segi pemahaman dan sisi penjanaan Kedua-dua pihak boleh menjana data baharu berbilang modal yang berkualiti tinggi dan memberikan maklum balas data kepada model itu sendiri. Apakah model? Awaker 1.0, model berbilang modal besar yang baru sahaja muncul di Forum Zhongguancun. Siapa pasukan itu? Enjin Sophon. Diasaskan oleh Gao Yizhao, pelajar kedoktoran di Sekolah Kecerdasan Buatan Hillhouse Universiti Renmin.
Tentera Udara A.S. mempamerkan jet pejuang AI pertamanya dengan profil tinggi! Menteri secara peribadi menjalankan pandu uji tanpa campur tangan semasa keseluruhan proses, dan 100,000 baris kod telah diuji selama 21 kali.
May 07, 2024 pm 05:00 PM
Baru-baru ini, bulatan tentera telah terharu dengan berita: jet pejuang tentera AS kini boleh melengkapkan pertempuran udara automatik sepenuhnya menggunakan AI. Ya, baru-baru ini, jet pejuang AI tentera AS telah didedahkan buat pertama kali, mendedahkan misterinya. Nama penuh pesawat pejuang ini ialah Variable Stability Simulator Test Aircraft (VISTA). Ia diterbangkan sendiri oleh Setiausaha Tentera Udara AS untuk mensimulasikan pertempuran udara satu lawan satu. Pada 2 Mei, Setiausaha Tentera Udara A.S. Frank Kendall berlepas menggunakan X-62AVISTA di Pangkalan Tentera Udara Edwards Ambil perhatian bahawa semasa penerbangan selama satu jam, semua tindakan penerbangan telah diselesaikan secara autonomi oleh AI! Kendall berkata - "Sejak beberapa dekad yang lalu, kami telah memikirkan tentang potensi tanpa had pertempuran udara-ke-udara autonomi, tetapi ia sentiasa kelihatan di luar jangkauan." Namun kini,
