pemasangan komponen pencetak javascript

Dengan perkembangan Internet, semakin banyak halaman web perlu menyokong fungsi percetakan. Komponen pencetak JavaScript ialah alat yang sangat baik yang boleh membantu kami mencetak halaman web dengan cepat. Artikel ini akan memperkenalkan kaedah pemasangan dan kemahiran penggunaan komponen pencetak JavaScript.

1. Pasang komponen pencetak JavaScript

Mula-mula, kita perlu memuat turun komponen pencetak JavaScript. Berikut ialah perpustakaan percetakan JavaScript sumber terbuka yang disyorkan: Print.js. Print.js ialah perpustakaan yang mudah digunakan yang tidak memerlukan mana-mana perpustakaan pihak ketiga, menyokong gaya tersuai dan mempunyai pelbagai kaedah pencetakan.

Selepas membuka laman web rasmi Print.js (https://printjs.crabbly.com/), kita dapat melihat bahawa pegawai tersebut menyediakan tiga kaedah pemasangan:

1

Kaedah ini paling mudah, cuma salin kod berikut ke dalam fail HTML:

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

2. Gunakan pakej NPM untuk memasang

Jika anda menggunakan Node.js persekitaran, anda boleh menggunakan arahan berikut untuk memasang:

npm install print-js

3 Muat turun manual

Anda juga boleh memuat turun kod Print.js secara manual pada GitHub, atau memuat turun versi terkini Print pada. pakej mampat .js tapak web rasmi dan ekstraknya ke dalam projek anda.

2. Gunakan komponen pencetak JavaScript

1 Cetak teks

Memandangkan Print.js sangat mudah digunakan, anda hanya perlu memanggil fungsi untuk merealisasikan fungsi pencetakan. . Berikut ialah contoh mudah pencetakan teks:

<script>
    function printText() {
        var text = "这是一段测试文本。";
        printJS({printable: text, type: 'raw'})
    }
</script>

<button onclick="printText()">打印文本</button>

Dalam kod di atas, kami mentakrifkan fungsi JavaScript printText(), yang digunakan untuk memulakan komponen pencetakan dan mencetak teks yang ditentukan. Antaranya, boleh dicetak ialah teks yang ingin kami keluarkan melalui pencetak, dan parameter jenis menentukan jenis kandungan yang dicetak Di sini kami mengisytiharkannya sebagai mentah, yang bermaksud bahawa teks yang dicetak adalah teks asal.

Dalam fail HTML kami menambah butang Apabila pengguna mengklik butang, fungsi printText() akan dipanggil dan teks akan dicetak.

2. Mencetak halaman web

Selain mencetak teks, komponen pencetak JavaScript juga boleh membantu kami mencetak keseluruhan halaman web, termasuk gaya dan gambar, dsb. Berikut ialah contoh pencetakan halaman web yang ringkas:

<script>
    function printPage() {
        printJS({printable: 'https://www.example.com', type: 'url'})
    }
</script>

<button onclick="printPage()">打印网页</button>

Dalam kod di atas, kami mentakrifkan fungsi JavaScript bernama printPage(). Apabila pengguna mengklik butang, fungsi ini akan dirujuk untuk memulakan komponen pencetakan. dan mencetak keseluruhan halaman web.

Dalam contoh ini, kami menyatakan bahawa jenis kandungan yang akan dicetak ialah URL, dan alamat halaman web yang akan dicetak ialah https://www.example.com yang ditentukan.

3. Gaya cetakan tersuai

Komponen pencetak JavaScript juga menyokong gaya cetakan tersuai, yang boleh membantu kami memilih fon dan tetapan taip yang sesuai semasa mencetak. Berikut ialah contoh gaya cetakan tersuai:

<script>
    function printStyledText() {
        var text = "这是一段测试文本。";
        var style = "<style>body {font-family: Arial, sans-serif; font-size: 12pt;}";
        printJS({printable: style + text, type: 'raw'})
    }
</script>

<button onclick="printStyledText()">打印格式化文本</button>

Dalam kod di atas, apabila mentakrifkan fungsi printStyledText(), kami menggunakan pembolehubah gaya untuk menentukan gaya CSS yang akan digunakan, di mana fon-family dan keluarga fon di bawah badan Atribut saiz fon menentukan gaya teks bercetak. Selain itu, kami membenamkan gaya dalam kandungan boleh cetak dan teks cetakan akhir akan mempunyai gaya ini.

Dalam contoh ini, kita boleh menukar lagi rupa kandungan bercetak dengan mengubah suai gaya CSS.

3. Ringkasan

Artikel ini memperkenalkan kaedah pemasangan dan kemahiran penggunaan komponen pencetak JavaScript, dan menunjukkan contoh teks percetakan, mencetak halaman web dan menyesuaikan gaya pencetakan. Dengan menggunakan kaedah ini, kami boleh melaksanakan fungsi pencetakan halaman web dengan cepat dan mengawal penampilan kandungan bercetak dengan sempurna.

Atas ialah kandungan terperinci pemasangan komponen pencetak javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!