Solusi implementasi klien murni dan server murni untuk HTML ke PDF

Pengguna mengisi formulir dan klik untuk disimpan, dan dapat langsung mengunduh dokumen PDF.

Ide

Google Chrome mengembangkan fitur Chrome Headless sendiri pada tahun 2017 dan meluncurkan Puppeteer pada saat yang sama. Ini dapat dipahami sebagai browser yang tidak memiliki antarmuka tetapi dapat menyelesaikan fitur fungsional server.

Jadi kita dapat memulai browser dalang di server, membuka URL tujuan, dan menggunakan fungsi konversi yang disediakan oleh browser Chrome untuk mengonversi HTML ke PDF.

Pertama, Anda perlu menginstal dalang. Mungkin ada kesalahan dalam instalasi NPM. Yang terbaik adalah menggunakan gambar CNPM Taobao untuk menginstalnya.

Masukkan cnpm i puppeteer -S Ketergantungan Instalasi.

Untuk membuat file JS, Anda hanya perlu membuka URL dengan Browser Puppeteer dan menyimpan PDF.

 // html2pdf.jsconst puppeteer = membutuhkan ('puppeteer'); (fungsi async () {// mulai layanan const browser = wakuit puppeteer.launch (); // buka tab const halaman = tunggu browser.newpage (); // Pergi ke alamat AWAIT = AWAIT browser.newpage ();/ Pergi ke alamat AWait page.goto ('https://koa.bootcss.com/#context'); // Nyalakan halaman html dan simpan ke jalur menunggu halaman.pdf ({path: test.pdf, format: 'a4'}) // tutup browser AWAiT browser.close () ();

Kemudian masukkan node html2pdf.js di konsol untuk memulai layanan.

Tentu saja, Module.Export juga dapat mengekspor metode modul sesuai dengan logika bisnis.

kekurangan

Tidak dapat menyimpan data dinamis pada formulir

Karena ini adalah halaman permintaan dari server, jika input pengguna tidak disimpan pada alamat permintaan, PDF cut-out akan menjadi keadaan awal di mana halaman belum diisi.

Dengan kata lain, itu hanya dapat mengonversi halaman statis karena kebutuhan kita memiliki banyak input pengguna, jadi lulus.

Ide

• Menggunakan html2canvas, masukkan simpul DOM yang perlu dikonversi, dan melintasi dan mengubahnya menjadi kanvas kanvas
• Konversi kanvas kanvas menjadi gambar base64, gunakan jspdf untuk membuat file pdf, dan memasukkan gambar ke dalam pdf.

kekurangan

distorsi.

Kita dapat dengan jelas menemukan bahwa karena mirip dengan memasukkan tangkapan layar ke dalam PDF pada halaman, resolusi dan konfigurasi halaman cenderung mempengaruhi kualitas gambar output.

Pada saat yang sama, karena itu adalah tangkapan layar, tautan halaman dan fungsi lainnya mungkin hilang.

Cutoff teks

Ketika kanvas kanvas lebih besar dari satu halaman ukuran PDF, output akan keliru. Pada saat ini, kita perlu menentukan apakah kanvas kanvas melebihi ukuran A4. Jika melebihi kanvas, segmen kanvas dan masukkan ke halaman yang berbeda.

Masalahnya muncul lagi saat ini. Karena membelah gambar, kemungkinan gambar atau teks akan dipotong dari setengahnya, karena kita tidak dapat menganalisis struktur item internal kanvas.

Kode inti

Kebutuhan kita tidak memiliki gambar dan tautan, sehingga masalah distorsi memiliki sedikit dampak pada kita. Pada saat yang sama, formulir kami terdiri dari beberapa item dengan panjang yang sama, dan barang -barang ini sangat pendek dan tidak akan melebihi satu bagian dari kertas A4 (meskipun ini tidak ketat, jika perlu, Anda bisa mendapatkan lebar dan tinggi elemen DOM dan memotong sesuai dengan ketinggian elemen DOM).

Jadi saya berencana untuk secara langsung membagi kanvas sesuai dengan item, dan menyimpan setiap item ke halaman kertas A4.

Beberapa pendekatan inti perlu dipahami sebelum Anda memulai:

html2canvas

 // DOM adalah simpul dom yang akan dikonversi html2canvas (dom, {backgroundColor: #ffffff, lebar: lebar, tinggi: tinggi, skala: 2, allowtaint: true,}). Kemudian ((canvas) => {// Canvas adalah kanvas setelah konversi yang berhasil}))

jspdf

 // Buat instance Biarkan pdf = jspdf baru ('', 'pt', 'a4'); // Tambahkan gambar ke file PDF // Parameter pertama adalah format file (base64) yang akan dimasukkan, yang kedua adalah format file // yang ketiga dan keempat adalah koordinat di sudut kiri atas gambar, dan dua yang terakhir adalah lebar dan tinggi gambar setelah memasukkan gambar); // Tambahkan halaman baru pdf.addpage () // simpan file pdf pdf.save ()

kanvas

 // canvas is the image to be cut// sx, sy is the coordinates to start cropping// swidth and sHeight are the width and height of cropping// dx and dy are the coordinates inserted in the image after cropping// sWidth, sHeight is the width and height of the image after cropping cxt.drawImage(canvas, sx, sy, sWidth, sHeight, dx, dy, sWidth, Sheight);

 /*** @description: Formulir ke file pdf* @return: pdf*/onsubmit () {// Ini adalah formulir yang ingin saya konversi, ada banyak tabel serupa di dalamnya let form = this. $ refs.Form; // Dapatkan lebar dan tinggi elemen let width = form.getBoundingClientRect (). Lebar; let height = form.getBoundingClientRect (). tinggi; html2canvas (form, {backgroundColor: #ffffff, lebar: lebar, tinggi: tinggi, skala: 2, allowtaint: true,}). Kemudian ((canvas) => {let Pdf = new jspdf ('', 'pt', 'a4'); / / lakukan cutting canting. // Lintasi daftar kanvas dan tambahkan gambar per halaman canvaslist.foreach ((item, index) => {// Konversi format gambar ke base64 Biarkan itemImage = item.todataurl ('Image/JPEG', 1.0); // Reserve 10px margin, lebar kertas A4 adalah 595px pada A 72 AT 72 PDF.Addimage (itemImage, 'jpeg', 10,10,575.28.575.28/item.width*item.height); pdf.save ('test.pdf');})},/*** @description: potong kanvas* @param {angka} jumlah irisan* @param {canvas} canvas* @return {array} canvas*/splitCanvas (canvas, num) {array} canvas*/splitCanvas (canvas, num) {height = canvas canvas*/splitCanvas (canvas, num) {lethas = canvas caneS. Biarkan chunkHeight = tinggi/num; // tinggi setiap irisan biarkan chunklist = []; // menyimpan kanvas hasil untuk (biarkan i = 0; i <tinggi; i+= chunkheight) {// inisialisasi posisi kotak crop let sx = 0, sy = i, swidth = wighth, sheight = chunkHe boet sx = 0, sy = i, swidth = wightth, sheight = chunkHe crop rectangle biarkan sx = 0, sy = i, swidth = wightth, sheight = chunkHe = let sx = i, i, swidth = wightth, sheight = chunkHe = let sx = i, i, swidth = wightth, sheight = chunkHe = let sx = i, SWIDTH = wightth, sheight = chunkHe crop switle let sx = i, SWIDTH = wide, sheight = chunkhe = chunkHe // Buat node kanvas Let canvaSitem = document.createElement (Canvas); // Inisialisasi ukuran kanvas kanvasitem.height = chunkHeight; canvasitem.width = lebar; Biarkan cxt = canvaSitem.getContext (2D); // Masukkan gambar yang dipotong ke node kanvas baru cxt.drawimage (Canvas, SX, SY, Swidth, Sheight, DX, Dy, Swidth, Sheight); chunklist.push (canvasitem); } return chunklist;},

Halaman setelah formulir disimpan

Efek konversi ke pdf

Ini adalah artikel tentang klien murni dan solusi implementasi server murni dari HTML ke PDF. Untuk konten HTML ke PDF yang lebih terkait, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!