Penjelasan mendetail tentang penggunaan kanvas untuk menyimpan halaman web sebagai file pdf untuk mendukung lintas domain

Pada artikel sebelumnya, saya menyebutkan bahwa Canvas mengambil tangkapan layar halaman web menjadi gambar. Berikut adalah persyaratan baru: tangkapan layar halaman web dan simpan sebagai file PDF untuk diunduh pengguna.

Menggunakan kanvas untuk menyimpan halaman web sebagai file pdf mendukung lintas domain

Persyaratan: Pengguna mengklik unduh, menyimpan halaman sebagai file PDF dan mengunduhnya.

Ide: Terus gunakan Canvas untuk mengambil tangkapan layar dan mengubah konten kanvas menjadi file pdf.

Pertama kita perlu memperkenalkan jalur unduhan file js jspdf.debug.js https://github.com/MrRio/jsPDF

Memperkenalkan file js kanvas, beranda situs web resmi alamat akuisisi file js: http://html2canvas.hertzen.com/

 <tipe skrip=teks/javascript src=js/html2canvas.js></script><tipe skrip=teks/javascript src=js/html2canvas.min.js></script><tipe skrip=teks/javascript src=js /jspdf.debug.js></script>

kode tombol div

 <div id=down_pdf>Tombol Ekspor ke PDF</div> <div class=sta-main>Div yang perlu diperoleh sebagai PDF</div>

kode jsp

 <tipe skrip=teks/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(klik, function() { var canvas2 = dokumen .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //Dapatkan lebar dan tinggi var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Perbesar kanvas kanvas sebanyak 2 kali, lalu letakkan di wadah kecil untuk menangani blur canvas2.width = w * 2; kanvas2.tinggi = h * 2; kanvas2.gaya.lebar = w + piksel; px; var konteks = canvas2.getContext(2d); //Proses offset konteks.skala(1.5, 1.5); //Ubah warna latar belakang, defaultnya adalah hitam $('.sta-main').css(latar belakang, # fff) html2canvas( _canvas, { //Menangani masalah tidak mendapatkan informasi lintas domain dari pdf di seluruh domain taintTest : false, useCORS : true,allowTaint : false, canvas : canvas2, dpi: 172, //Ekspor kejelasan pdf yang dirender: function (kanvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //Satu halaman pdf menampilkan tinggi kanvas yang dihasilkan oleh halaman html; * 841.89 ; //Tinggi halaman HTML tanpa pdf dihasilkan var leftHeight = contentHeight; //offset halaman PDF var position = 0; //Lebar dan tinggi kanvas yang dihasilkan halaman html pada gambar pdf (ukuran kertas a4 [595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; 'gambar/jpeg', 1.0); var pdf = jsPDF baru('', 'pt', 'a4'); //Ada dua ketinggian yang perlu dibedakan, satu adalah tinggi sebenarnya dari halaman html, dan tinggi halaman pdf yang dihasilkan (841.89) //Bila konten tidak melebihi rentang tampilan dari halaman pdf, tidak diperlukan paging if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //Hindari menambahkan halaman kosong jika (leftHeight > 0) { pdf.addPage(); pdf.save('Nama PDF.pdf'); $('.sta-main').css(latar belakang, )})</script>

Kali ini halaman web diubah menjadi PDF, dan screenshot terakhir halaman web tersebut adalah PNG, menggunakan teknologi yang sama, keduanya menggunakan Canvas untuk menangkap kanvas terlebih dahulu kemudian mengkonversi formatnya.

Ada juga masalah seperti offset, blur, lintas domain, dll., yang dapat diatasi dengan menggunakan kode sebelumnya.

Mengonversi PDF akan membuat warna latar belakang menjadi hitam. Cukup gunakan gaya css untuk mengubah warna latar belakang.

Konversi sempurna ke pdf.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.