Menjana PDF dari laman web dengan cepat dengan JSPDF

jspdf: alat yang berkuasa untuk generasi pdf pelanggan, kawalan halus elemen halaman

mata teras:

• JSPDF adalah perpustakaan JavaScript yang membolehkan penjanaan fail PDF secara langsung di sisi klien, dengan itu mempercepatkan pemprosesan. Ia amat sesuai untuk mengawal kedudukan, saiz dan paging elemen yang tepat dalam dokumen.
• Perpustakaan JSPDF mudah digunakan untuk penjanaan fail PDF asas, tetapi disebabkan oleh dokumentasi terhad, ia boleh menjadi lebih mencabar untuk projek -projek yang kompleks. Walau bagaimanapun, ia memberikan keupayaan untuk menambah teks, imej, dan bentuk kepada PDF, dan memberikan kawalan yang tepat terhadap kedudukan dan saiz.
• Perpustakaan JSPDF boleh dilanjutkan menggunakan APInya. Fungsi seperti textAlign() boleh ditambah dan sifat teks boleh diubah menggunakan setFontSize(), setFont(), setTextColor(), dan setFontType() kaedah.
• JSPDF juga membolehkan membuat PDF multi-halaman, menambah jadual menggunakan plugin "AutoTable", dan termasuk hiperpautan. Walau bagaimanapun, disebabkan oleh sekatan keselamatan penyemak imbas, pengguna tidak dapat menentukan lokasi simpan khusus untuk PDF yang dihasilkan.

Format Dokumen Portable (PDF) adalah inovasi utama dalam bidang penerbitan desktop dan automasi pejabat.

Ia juga digunakan secara meluas dalam penerbitan web, tetapi malangnya, ia sering digunakan secara tidak betul - contohnya untuk menggantikan kandungan yang sepatutnya dibina dengan HTML. Ini membawa kepada banyak soalan mengenai kebolehgunaan, kebolehcapaian, SEO dan banyak lagi.

Walau bagaimanapun, fail PDF diperlukan dalam beberapa kes: apabila dokumen yang diarkibkan diperlukan dan mesti digunakan di luar rangkaian (seperti invois), atau apabila kawalan dalam percetakan diperlukan.

Ia adalah keperluan untuk mencetak kawalan yang mendorong saya untuk mengkaji cara untuk menghasilkan PDF dengan mudah.

Tujuan artikel ini bukan hanya untuk menerangkan cara membuat PDF (terdapat banyak cara mudah untuk melakukan ini), tetapi juga memberi tumpuan kepada di mana fail PDF dapat menyelesaikan masalah, dan seperti JSPDF bagaimana untuk membantu dengan mudah alat.

Pemprosesan cetak

Sesiapa yang telah menangani peraturan percetakan CSS memahami betapa sukarnya untuk mencapai keserasian silang penyemak imbas yang baik (contohnya, lihat jadual sokongan Break Page yang boleh saya gunakan). Oleh itu, apabila saya perlu membina sesuatu yang perlu saya cetak, saya sentiasa cuba mengelakkan menggunakan CSS, penyelesaian yang paling mudah adalah menggunakan PDF.

Apa yang saya bicarakan di sini bukanlah HTML yang mudah untuk penukaran PDF. (Saya telah mencuba beberapa alat sedemikian, tetapi tidak satu pun dari mereka yang benar -benar memuaskan saya.) Matlamat saya adalah untuk mengawal sepenuhnya kedudukan dan saiz elemen, pecahan halaman, dll.

Pada masa lalu, saya pernah menggunakan FPDF, alat PHP yang mudah memberi anda kawalan seperti ini dan dengan mudah boleh memanjangkannya dengan banyak plugin.

Malangnya, perpustakaan nampaknya telah ditinggalkan (versi terakhirnya bermula pada tahun 2011) (kemas kini: Sebenarnya, versi terkini nampaknya dikeluarkan pada bulan Disember 2015), tetapi terima kasih kepada beberapa perpustakaan JavaScript, kami kini PDF Fail boleh dibina secara langsung di sebelah pelanggan (supaya ia dijana lebih cepat).

Beberapa bulan yang lalu, ketika saya memulakan projek saya, saya mencari perpustakaan JS dan akhirnya saya dapati dua calon: JSPDF dan PDFMake. PDFMake nampaknya didokumentasikan dengan baik dan mudah digunakan, tetapi kerana ia adalah beta saya memilih JSPDF.

membina pdf menggunakan jspdf

Dokumentasi JSPDF agak pendek, termasuk halaman bersama dengan beberapa demo, serta maklumat lanjut dalam fail sumber (atau halaman JSDOC), jadi ingatlah bahawa menggunakannya untuk projek -projek yang kompleks boleh menjadi agak sukar pada mulanya.

Bagaimanapun, JSPDF sangat mudah untuk fail PDF asas dihasilkan. Mari kita lihat contoh "Hello World" yang mudah:

<code class="language-javascript">var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');</code>

Halaman HTML ini menjana fail pdf halaman tunggal dan menyimpannya ke komputer anda. Pertama, anda perlu menghubungkan ke perpustakaan JSPDF (dalam kes ini, dari cdnjs.com), kemudian buat contoh JSPDF, tambahkan garis teks, dan simpan hasilnya sebagai hello_world.pdf.

Perhatikan bahawa saya menggunakan versi 1.0.272 dan bukan yang terbaru: pada masa penulisan, versi terkini adalah 1.1.135, tetapi ia mempunyai banyak masalah, jadi saya masih menggunakan versi sebelumnya.

Anda dapat melihat betapa mudahnya untuk membina fail PDF asas (anda boleh mencari lebih banyak contoh di laman web JSPDF).

Mari cuba membina kandungan yang lebih kompleks.

item flyer

Saya diminta untuk membina permohonan untuk membuat beberapa risalah mudah beberapa bulan yang lalu. Ia adalah sebahagian daripada projek yang lebih besar yang berkaitan dengan perkhidmatan agensi pelancongan, seksyen flyer sebenar dihuni dengan beberapa data JSON.

Tujuan utama Flyer adalah untuk menyediakan cara mudah untuk memaparkan tawaran istimewa untuk dipaparkan di tetingkap kedai Agensi Pelancongan.

Saya telah menjadualkan semula aplikasinya untuk artikel ini, mengeluarkan semua ciri-ciri pelayan, reka bentuk flyer yang mudah, menyingkirkan keserasian penyemak imbas warisan, dan membina UI yang sangat mudah menggunakan Bootstrap 3 dan jQuery.

Demo ini berfungsi dengan baik dengan Firefox dan Chrome, manakala Explorer (atau Edge) tidak membenarkan anda menunjukkan pratonton, tetapi hanya boleh memuat turun PDF yang dihasilkan.

Ini adalah contoh PDF yang dibuat menggunakan aplikasi (Foto Sumber: Rafael Leão/Unsplash)

Demo runnable boleh didapati di akhir artikel ini atau secara langsung di Codepen. Ambil perhatian bahawa sejak Codepen memuatkan halaman hasil dalam iframe, pratonton PDF dimuatkan dalam iframes mempunyai beberapa isu dalam Chrome dan Safari, menghalang pratonton daripada dipaparkan. (Jika anda boleh, gunakan Firefox, atau cuba demo di laman web peribadi saya).

Flyer Builder

Antara muka pengguna membolehkan pengguna memasukkan beberapa data asas (tajuk, ringkasan dan harga). Anda boleh memilih untuk menambah imej, jika tidak tajuk "tawaran istimewa" kotak kelabu akan dipaparkan.

Data lain (nama ejen dan url dan logo laman webnya) tertanam dalam kod aplikasi.

pdf boleh dipratonton dalam iframe (kecuali penjelajah atau tepi) atau dimuat turun secara langsung.

Apabila mengklik butang "Kemas Kini Pratonton" atau "Muat turun", PDF dijana menggunakan JSPDF dan diserahkan kepada IFRAME sebagai rentetan data URI atau disimpan ke cakera, seperti yang ditunjukkan dalam contoh di atas.

Generasi PDF pertama menggunakan pilihan berikut untuk membuat contoh objek JSPDF baru: Orientasi Potret (P), Unit Milimeter (MM), "A4" format.

<code class="language-javascript">var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');</code>

Gunakan fungsi addimage untuk menambah imej. Ambil perhatian bahawa setiap objek yang diletakkan di halaman PDF mesti diposisikan dengan tepat. Anda mesti menggunakan unit yang diisytiharkan untuk mengendalikan setiap koordinat objek.

<code class="language-javascript">var pdf = new jsPDF('p', 'mm', 'a4');</code>

Imej mestilah pengekodan Base64: Logo proksi tertanam dalam skrip dalam format ini, manakala imej yang dimuatkan pengguna dikodkan menggunakan kaedah ReadAsDataurl dalam $ ('#flyer-image'). Tukar pendengar.

Tajuk ditambah menggunakan fungsi teks. Perhatikan bahawa fungsi ini bukan sebahagian daripada teras JSPDF, tetapi, sebagai penulis mencadangkan dalam contohnya, perpustakaan dapat dengan mudah dilanjutkan menggunakan APInya. Anda boleh mencari fungsi TextAlign () di bahagian atas skrip pembina flyer:

<code class="language-javascript">// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);</code>

Fungsi ini mengira koordinat x rentetan teks untuk memusatkannya, dan kemudian memanggil kaedah teks asli ():

<code class="language-javascript">pdf.textAlign(flyer_title, {align: "center"}, 0, _y);</code>

Untuk menukar sifat teks, anda boleh menggunakan kaedah

, setFontSize(), setFont(), dan setTextColor(). setFontType()

Sebagai contoh, untuk menetapkan rentetan merah 20pt kali, anda perlu menaip yang berikut:

<code class="language-javascript">pdf.text(text string, X, Y);</code>

"Tawaran Khas" Kotak kelabu dan lingkaran harga Gunakan dua kaedah yang sama:

dan roundedRect(). Kedua -duanya memerlukan koordinat sudut kiri atas, nilai saiz (lebar dan ketinggian dalam kes pertama dan radius dalam kes kedua): circle()

Parameter gaya

<code class="language-javascript">pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');</code>

merujuk kepada sifat mengisi dan strok objek. Gaya yang sah termasuk: s [lalai] untuk strok, f untuk padding, df (atau fd) untuk padding dan strok.

Ciri -ciri isi dan stroke

mestilah pratetap dengan

dan setFillColor, yang memerlukan nilai RGB dan setDrawColor, yang memerlukan nilai linewidth dalam unit yang diisytiharkan pada permulaan penciptaan dokumen PDF. setLineWidth

kod lengkap boleh didapati dalam demonstrasi codepen:

(pautan codepen harus dimasukkan di sini, kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan)

Kesimpulan

Contoh asas ini menunjukkan cara membina risalah yang sangat asas menggunakan JSPDF.

Ia mungkin mudah digunakan, tetapi kekurangan dokumentasi lengkap menjadikan setiap langkah sangat rumit.

Saya masih mencari penyelesaian lain, memberi tumpuan kepada penyelesaian lain seperti PDFMake. Tetapi pada akhirnya, saya fikir satu -satunya penyelesaian yang benar -benar jelas adalah untuk menyokong pelayar yang lebih baik yang mencetak peraturan CSS!

(bahagian Soalan Lazim harus disertakan di sini, kandungannya sama dengan teks asal, tetapi formatnya boleh diselaraskan seperti yang diperlukan)

Atas ialah kandungan terperinci Menjana PDF dari laman web dengan cepat dengan JSPDF. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!