Cara Membuat PDF Dari Aplikasi Web Anda

Diterbitkan: 2022-03-10
Ringkasan cepat Ada banyak pilihan untuk membuat PDF dari aplikasi web. Dalam artikel ini, Rachel Andrew melihat alat yang tersedia dan membagikan rekomendasinya untuk membantu Anda menemukan alat yang paling sesuai untuk Anda.

Banyak aplikasi web memiliki persyaratan untuk memberi pengguna kemampuan untuk mengunduh sesuatu dalam format PDF. Dalam hal aplikasi (seperti toko e-niaga), PDF tersebut harus dibuat menggunakan data dinamis, dan segera tersedia bagi pengguna.

Dalam artikel ini, saya akan mengeksplorasi cara-cara di mana kita dapat menghasilkan PDF langsung dari aplikasi web dengan cepat. Ini bukan daftar alat yang lengkap, tetapi sebaliknya saya bertujuan untuk menunjukkan pendekatan yang berbeda. Jika Anda memiliki alat favorit atau pengalaman Anda sendiri untuk dibagikan, silakan tambahkan ke komentar di bawah.

Dimulai Dengan HTML Dan CSS

Aplikasi web kami mungkin sudah membuat dokumen HTML menggunakan informasi yang akan ditambahkan ke PDF kami. Dalam kasus faktur, pengguna mungkin dapat melihat informasi secara online, lalu mengklik untuk mengunduh PDF untuk catatan mereka. Anda mungkin membuat slip pengepakan; sekali lagi, informasi sudah disimpan di dalam sistem. Anda ingin memformatnya dengan cara yang bagus untuk diunduh dan dicetak. Oleh karena itu, tempat yang baik untuk memulai adalah dengan mempertimbangkan apakah mungkin menggunakan HTML dan CSS itu untuk menghasilkan versi PDF.

CSS memang memiliki spesifikasi yang berhubungan dengan CSS untuk pencetakan, dan ini adalah modul Paged Media. Saya memiliki gambaran umum tentang spesifikasi ini dalam artikel saya “Merancang Untuk Mencetak Dengan CSS”, dan CSS digunakan oleh banyak penerbit buku untuk semua hasil cetak mereka. Oleh karena itu, karena CSS sendiri memiliki spesifikasi untuk bahan cetak, apakah kita harus bisa menggunakannya?

Cara paling sederhana pengguna dapat menghasilkan PDF adalah melalui browser mereka. Dengan memilih untuk mencetak ke PDF daripada printer, PDF akan dihasilkan. Sayangnya, PDF ini biasanya tidak sepenuhnya memuaskan! Untuk mulai dengan, itu akan memiliki header dan footer yang secara otomatis ditambahkan ketika Anda mencetak sesuatu dari halaman web. Ini juga akan diformat sesuai dengan stylesheet cetak Anda — dengan asumsi Anda memilikinya.

Masalah yang kami hadapi di sini adalah dukungan yang buruk dari spesifikasi fragmentasi di browser; ini mungkin berarti bahwa konten halaman Anda rusak dengan cara yang tidak biasa. Dukungan untuk fragmentasi tidak merata, seperti yang saya temukan ketika saya meneliti artikel saya, “Memecahkan Kotak Dengan Fragmentasi CSS”. Ini berarti bahwa Anda mungkin tidak dapat mencegah kerusakan konten yang tidak optimal, dengan header dibiarkan sebagai item terakhir pada halaman, dan seterusnya.

Selain itu, kami tidak memiliki kemampuan untuk mengontrol konten di kotak margin halaman, misalnya menambahkan tajuk pilihan kami ke setiap halaman atau penomoran halaman untuk menunjukkan berapa banyak halaman yang dimiliki faktur kompleks. Hal-hal ini adalah bagian dari spesifikasi Paged Media, tetapi belum diterapkan di browser mana pun.

Artikel saya “Panduan Untuk Mencetak Stylesheet Pada 2018” masih akurat dalam hal jenis dukungan yang dimiliki browser untuk mencetak langsung dari browser, menggunakan print stylesheet.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Mencetak Menggunakan Mesin Rendering Browser

Ada cara untuk mencetak ke PDF menggunakan mesin rendering browser, tanpa melalui menu cetak di browser, dan berakhir dengan header dan footer seolah-olah Anda telah mencetak dokumen. Opsi paling populer dalam menanggapi tweet saya adalah wkhtmltopdf, dan mencetak menggunakan Chrome dan Dalang tanpa kepala.

wkhtmltopdf

Solusi yang disebutkan beberapa kali di Twitter adalah alat baris perintah yang disebut wkhtmltopdf. Alat ini mengambil file HTML atau beberapa file, bersama dengan stylesheet dan mengubahnya menjadi PDF. Ini dilakukan dengan menggunakan mesin rendering WebKit.

Pada dasarnya, oleh karena itu, alat ini melakukan hal yang sama seperti mencetak dari browser, namun Anda tidak akan mendapatkan header dan footer yang ditambahkan secara otomatis. Di sisi positif ini, jika Anda memiliki stylesheet cetak yang berfungsi untuk konten Anda, maka itu juga harus ditampilkan dengan baik ke PDF menggunakan alat ini, sehingga tata letak yang sederhana dapat dicetak dengan sangat baik.

Sayangnya, bagaimanapun, Anda masih akan mengalami masalah yang sama seperti saat mencetak langsung dari browser web dalam hal kurangnya dukungan untuk spesifikasi Paged Media dan properti fragmentasi, karena Anda masih mencetak menggunakan mesin rendering browser. Ada beberapa tanda yang dapat Anda berikan ke wkhtmltopdf untuk menambahkan kembali beberapa fitur yang hilang yang akan Anda miliki secara default menggunakan spesifikasi Paged Media. Namun, ini memang membutuhkan pekerjaan ekstra selain menulis HTML dan CSS yang baik.

Chrome tanpa kepala

Kemungkinan lain yang menarik adalah penggunaan Headless Chrome dan Puppeteer untuk mencetak ke PDF.

Namun sekali lagi Anda dibatasi oleh dukungan browser untuk Paged Media dan fragmentasi. Ada beberapa opsi yang dapat diteruskan ke fungsi page.pdf() . Seperti wkhtmltopdf, ini menambahkan beberapa fungsi yang mungkin dari CSS jika ada dukungan browser.

Mungkin salah satu dari solusi ini akan melakukan semua yang Anda butuhkan, namun, jika Anda menemukan bahwa Anda sedang berperang, kemungkinan Anda mencapai batas dari apa yang mungkin dilakukan dengan mesin rendering browser saat ini, dan perlu mencari solusi yang lebih baik.

Polyfill JavaScript Untuk Media Berhalaman

Ada beberapa upaya untuk mereproduksi spesifikasi Paged Media di browser menggunakan JavaScript — pada dasarnya membuat Paged Media Polyfill. Ini bisa memberi Anda dukungan Paged Media saat menggunakan Dalang. Lihatlah paged.js dan vivliostyle.

Menggunakan Agen Pengguna Cetak

Jika Anda ingin tetap menggunakan solusi HTML dan CSS maka Anda perlu mencari Agen Pengguna (UA) yang dirancang untuk mencetak dari HTML dan CSS, yang memiliki API untuk menghasilkan PDF dari file Anda. Agen Pengguna ini menerapkan spesifikasi Paged Media dan memiliki dukungan yang jauh lebih baik untuk properti Fragmentasi CSS; ini akan memberi Anda kontrol yang lebih besar atas output. Pilihan utama meliputi:

  • Pangeran
  • Rumah Antena
  • PDFReaktor

UA cetak akan memformat dokumen menggunakan CSS — seperti halnya browser web. Seperti halnya dukungan browser untuk CSS, Anda perlu memeriksa dokumentasi UA ini untuk mengetahui apa yang mereka dukung. Misalnya, Prince (yang paling saya kenal) mendukung Flexbox tetapi tidak CSS Grid Layout pada saat penulisan. Saat mengirim halaman Anda ke alat yang Anda gunakan, biasanya ini dengan lembar gaya khusus untuk dicetak. Seperti halnya lembar gaya cetak biasa, CSS yang Anda gunakan di situs Anda tidak semuanya sesuai untuk versi PDF.

Membuat stylesheet untuk alat-alat ini sangat mirip dengan membuat stylesheet cetak biasa, membuat jenis keputusan dalam hal apa yang akan ditampilkan atau disembunyikan, mungkin menggunakan ukuran atau warna font yang berbeda. Anda kemudian dapat memanfaatkan fitur dalam spesifikasi Paged Media, menambahkan catatan kaki, nomor halaman, dan sebagainya.

Dalam hal menggunakan alat-alat ini dari aplikasi web Anda, Anda perlu menginstalnya di server Anda (tentu saja setelah membeli lisensi untuk melakukannya). Masalah utama dengan alat ini adalah harganya mahal. Yang mengatakan, mengingat kemudahan yang dengannya Anda dapat menghasilkan dokumen cetak dengan mereka, mereka mungkin membayar sendiri dalam waktu pengembang yang dihemat.

Dimungkinkan untuk menggunakan Prince melalui API, berdasarkan pembayaran per dokumen, melalui layanan yang disebut DocRaptor. Ini tentu akan menjadi tempat yang baik bagi banyak aplikasi untuk memulai seolah-olah akan menjadi lebih hemat biaya untuk menghosting sendiri, biaya pengembangan untuk beralih akan menjadi minimal.

Alternatif gratis, yang tidak selengkap alat di atas tetapi mungkin mencapai hasil yang Anda butuhkan, adalah WeasyPrint. Itu tidak sepenuhnya mengimplementasikan semua Media Paged, namun, mengimplementasikan lebih dari mesin browser tidak. Pasti, satu untuk dicoba!

Alat lain yang mengklaim mendukung konversi dari HTML dan CSS termasuk PDFCrowd, yang dengan berani mengklaim mendukung HTML5, CSS3 dan JavaScript. Namun, saya tidak dapat menemukan detail apa pun tentang apa yang didukung, dan apakah ada spesifikasi Paged Media. Juga menerima sebutan dalam tanggapan terhadap tweet saya adalah mPDF.

Menjauh Dari HTML Dan CSS

Ada sejumlah solusi lain, yang menjauh dari penggunaan HTML dan CSS dan mengharuskan Anda membuat keluaran khusus untuk alat tersebut. Beberapa pesaing JavaScript adalah sebagai berikut:

  • jsPDF
  • pdfmake

Rekomendasi

Selain pendekatan berbasis JavaScript, yang akan mengharuskan Anda untuk membuat representasi yang sama sekali berbeda dari konten Anda untuk dicetak, keindahan dari banyak solusi ini adalah bahwa mereka dapat dipertukarkan. Jika solusi Anda didasarkan pada pemanggilan alat baris perintah, dan meneruskan alat itu ke HTML, CSS, dan mungkin beberapa JavaScript, cukup mudah untuk beralih antar alat.

Dalam penulisan artikel ini, saya juga menemukan pembungkus Python yang dapat menjalankan sejumlah alat yang berbeda. (Perhatikan bahwa Anda harus sudah menginstal alat itu sendiri, namun, ini bisa menjadi cara yang baik untuk menguji berbagai alat pada dokumen sampel.)

Untuk mendukung Paged Media dan fragmentasi, Prince, Antenna House, dan PDFReactor akan menjadi yang teratas. Sebagai produk komersial, mereka juga datang dengan dukungan. Jika Anda memiliki anggaran, halaman kompleks untuk dicetak ke PDF, dan batasan Anda adalah waktu pengembang, kemungkinan besar Anda akan menemukan ini sebagai rute tercepat agar pembuatan PDF Anda berfungsi dengan baik.

Namun, dalam banyak kasus, alat gratis akan bekerja dengan baik untuk Anda. Jika persyaratan Anda sangat mudah, maka wkhtmltopdf, atau solusi dasar Chrome dan Dalang dapat melakukan triknya. Tampaknya berhasil bagi banyak orang yang membalas tweet asli saya.

Namun, jika Anda kesulitan mendapatkan hasil yang diinginkan, ketahuilah bahwa ini mungkin batasan pencetakan browser, dan bukan kesalahan yang Anda lakukan. Jika Anda menginginkan lebih banyak dukungan Paged Media, tetapi tidak dalam posisi untuk mencari produk komersial, mungkin lihat WeasyPrint.

Saya harap ini adalah kumpulan alat yang berguna yang tersedia untuk membuat PDF dari aplikasi web Anda. Jika tidak ada yang lain, ini menunjukkan bahwa ada berbagai macam pilihan, jika pilihan awal Anda tidak bekerja dengan baik.

Silakan tambahkan pengalaman dan saran Anda sendiri di komentar, ini adalah salah satu hal yang akhirnya banyak kita tangani, dan pengalaman pribadi yang dibagikan bisa sangat membantu.

Bacaan lebih lanjut

Kumpulan berbagai sumber daya dan alat yang disebutkan dalam artikel ini, bersama dengan beberapa sumber daya berguna lainnya untuk bekerja dengan file PDF dari aplikasi web.

spesifikasi

  • Modul Media Berhalaman
  • Fragmentasi

Artikel dan Sumber Daya

  • Mendesain Untuk Dicetak Dengan CSS
  • Memecah Kotak Dengan Fragmentasi CSS
  • Panduan Untuk Keadaan Print Stylesheets Di 2018
  • Memulai Chrome Tanpa Kepala dan Dalang
  • print-css.rocks

Peralatan

  • wkhtmltopdf
  • paged.js
  • gaya hidup
  • Pangeran
  • Rumah Antena
  • PDFReaktor
  • Dok Raptor
  • WeasyPrint
  • PDFKerumunan
  • mPDF
  • jsPDF
  • pdfmake
  • Server Produksi & Publikasikan