Bagaimana cara mencetak dokumen javascript?

Mencetak. js terutama ditulis untuk membantu kami mencetak file PDF langsung di dalam aplikasi kami, tanpa meninggalkan antarmuka, dan tidak menggunakan penyematan. Untuk situasi unik di mana pengguna tidak perlu membuka atau mengunduh file PDF, dan sebagai gantinya, mereka hanya perlu mencetaknya. Salah satu skenario di mana ini berguna, misalnya, adalah saat pengguna meminta untuk mencetak laporan yang dibuat di sisi server. Laporan ini dikirim kembali sebagai file PDF. Tidak perlu membuka file ini sebelum mencetaknya. Mencetak. js menawarkan cara cepat untuk mencetak file-file ini di dalam aplikasi kita

1) Unduh dan Instal

Anda dapat mengunduh versi terbaru (v1. 2. 0) dari Cetak. js dari rilis GitHub atau gunakan salah satu dari dua langkah yang diberikan di bawah ini tergantung pada manajer paket Anda

• Untuk menginstal menggunakan npm

npm install print-js --save

• Untuk pemasangan menggunakan benang

yarn add print-js_

Setelah menginstal melalui npm atau benang, Anda harus mengimpor pustaka ke dalam proyek Anda, seperti yang ditunjukkan di bawah ini, sebelum mulai menggunakannya

import print from 'print-js'2) Memulai

• Pertama, kita perlu menyertakan Print. perpustakaan js di halaman

<script src="print.js"></script>

• Jika Anda akan menggunakan fitur modal, sertakan juga Print. css di halaman

<link rel="stylesheet" type="text/css" href="print.css">_

Itu dia. Anda sekarang dapat menggunakan Print. js di halaman Anda

Saat menulis kode javascript Anda, ingatlah bahwa perpustakaan menempati variabel global printJS

3) Menggunakan Cetak. js

Sekarang, setelah kita menginstal dan mengimpor perpustakaan dengan benar, mari kita mulai menggunakannya

4 jenis dokumen yang dapat Anda cetak menggunakan Print. js

i) PDF (Bawaan)

Penggunaan dasarnya adalah untuk memanggil printJS() dan hanya meneruskan URL dokumen PDF

printJS('docs/PrintJS.pdf')

ii) HTML

Untuk mencetak elemen HTML, dengan cara yang sama, masukkan id elemen dan ketik

printJS('myElementId', 'html')_

iii) GAMBAR

Untuk file gambar, idenya sama, tetapi Anda harus memberikan argumen kedua

printJS('images/PrintJS.jpg', 'image')

iv) JSON

Saat mencetak data JSON, teruskan data, jenis, dan properti data yang ingin Anda cetak

printJS(
{
printable: myData,
type: 'json',
properties: ['prop1', 'prop2', 'prop3']
}
);_4) Contoh

Cukup teorinya, sekarang mari kita lihat beberapa ilustrasi berguna tentang bagaimana kita dapat menggunakan pustaka ini untuk menyelesaikan beberapa pekerjaan pencetakan yang baik di halaman web kita

1. Cetak Formulir HTML

Mencetak. js menerima objek dengan argumen. Mari cetak formulir HTML dengan tajuk khusus sekarang

Cetak Formulir HTML dengan Tajuk Menggunakan Cetak. js

2. Cetak Gambar

Untuk mencetak banyak gambar secara bersamaan, kita dapat melewatkan serangkaian gambar. Kita juga bisa melewatkan style yang akan diterapkan pada setiap gambar

Mencetak Beberapa Gambar Bergaya secara bersamaan Menggunakan Cetak. js

3. Cetak Data JSON

Cetak data JSON sebagai tabel Menggunakan Print. js

4. Mencetak Data JSON Bergaya

Kami sekarang dapat menambahkan gaya khusus ke tabel data kami serta menyesuaikan teks header tabel dengan mengirimkan larik objek

Mencetak data JSON Bergaya sebagai tabel

5. Tangani Kesalahan saat Mencetak PDF

Anda juga dapat menangani error menggunakan metode onError() yang disediakan oleh print. js dan tampilkan kepada pengguna menggunakan peringatan seperti yang ditunjukkan pada contoh di bawah ini

Mencetak. js Penanganan kesalahan 5) Kompatibilitas Browser

Sejak cetak. js adalah perpustakaan yang cukup baru, oleh karena itu, saat ini, tidak semua fitur perpustakaan berfungsi antar browser. Namun, sebagian besar browser terkemuka mendukung semua jenis dokumen yang dapat dicetak oleh perpustakaan luar biasa ini. Di bawah ini adalah hasil pengujian yang dilakukan dengan browser utama ini, menggunakan versi terbarunya

Kredit. https. //printjs. pemarah. com/

Pengujian dilakukan menggunakan alat pengujian lintas-browser yang disediakan oleh BrowserStack

Jadi, itu saja tentang perpustakaan Javascript yang berguna ini. Saya harap informasi yang diberikan dalam artikel ini memberikan nilai bagi Anda dan membantu Anda menyederhanakan dan mengoptimalkan tugas pencetakan di masa mendatang pada aplikasi web Anda

Jika dokumen masih dimuat saat fungsi ini dipanggil, maka dokumen akan selesai dimuat sebelum membuka dialog cetak

Metode ini akan memblokir saat dialog cetak terbuka

print() _

Tidak ada

Tidak ada (undefined)

Spesifikasi

Tabel BCD hanya dimuat di browser dengan JavaScript diaktifkan. Aktifkan JavaScript untuk melihat data

• Pencetakan
• beforeprint_ acara
• afterprint acara

Menemukan masalah konten dengan halaman ini?

• Edit halaman di GitHub
• Laporkan masalah konten
• Lihat sumbernya di GitHub

Ingin lebih terlibat?

Halaman ini terakhir diubah pada 13 Sep 2022 oleh kontributor MDN

Bagaimana cara mencetak langsung dalam JavaScript?

Bagaimana cara mencetak file teks JavaScript?

Bagaimana cara mencetak laporan dalam JavaScript?

Metode JavaScript mana yang digunakan untuk mencetak halaman?