cetakan tetapan javascript-Soal Jawab bahagian hadapan-php.cn

cetakan tetapan javascript

WBOY

Lepaskan： 2023-05-17 18:07:38

asal

1521 orang telah melayarinya

Tetapan JavaScript untuk mencetak

Dalam aplikasi web, fungsi pencetakan selalunya penting. Javascript menyediakan cara mudah untuk menyediakan percetakan bagi memastikan pengalaman pengguna yang terbaik apabila halaman dicetak. Dalam artikel ini, kami akan memperkenalkan cara menyediakan percetakan menggunakan Javascript, mari kita ketahui bersama!

Tetapkan gaya cetakan

Dalam amalan, kita perlu memastikan gaya halaman yang dicetak dapat memenuhi keperluan pengguna dengan sebaiknya. Tidak seperti paparan skrin, gaya cetakan perlu lebih terperinci dan jelas. Melalui Javascript, kami boleh menetapkan gaya cetakan dengan mudah untuk memastikan kandungan bercetak sepadan dengan pengalaman pengguna.

Pertama, kita perlu menggunakan CSS untuk gaya cetakan. Pendekatan ini serupa dengan menggunakan CSS untuk menukar gaya halaman. Sebagai contoh, dalam contoh berikut, kami menetapkan saiz fon halaman dan warna untuk cetakan:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Set Print Style</title>
  <style>
    @media print {
      body {
        font-size: 12px;
        color: #333;
      }
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

Salin selepas log masuk

Di sini, kami menggunakan arahan cetakan @media untuk menetapkan CSS pencetakan. Ambil perhatian bahawa terdapat arahan @media dalam gaya ini untuk memastikan gaya ini hanya sesuai untuk pencetak dan tidak akan dipaparkan dalam penyemak imbas. Kami menetapkan saiz fon kepada 12px dan warna kepada #333. Ini akan memastikan bahawa apabila halaman dicetak, saiz fon dan warna adalah sama seperti yang dipaparkan pada skrin. Teknik yang sama boleh digunakan pada gaya lain, seperti warna latar belakang dan jidar luar.

Tetapkan kandungan halaman yang dicetak

Dalam sesetengah kes, kita perlu menyembunyikan kandungan tertentu untuk memudahkan halaman yang dicetak dan memastikan bahawa hanya maklumat yang paling diperlukan dipaparkan. Menggunakan Javascript kita boleh menyembunyikan mana-mana elemen pada halaman dengan mudah.

Kod Javascript berikut menunjukkan cara menyembunyikan elemen pada halaman:

function hideElements() {
  var elements = document.getElementsByTagName('div');

  for (var i=0; i<elements.length; i++) {
    elements[i].style.display = 'none';
  }
}

window.onload = hideElements;

Salin selepas log masuk

Dalam contoh ini, kita mula-mula mentakrifkan fungsi yang dipanggil hideElements. Dalam fungsi ini, kami menggunakan kaedah getElementsByTagName untuk mendapatkan semua elemen div dalam halaman. Kami kemudian menggunakan gelung for untuk menggelung setiap teg div dan menetapkannya kepada "tiada" menggunakan sifat style.display, yang akan menyembunyikannya. Akhir sekali, kami mengikat fungsi ini pada peristiwa window.onload untuk memastikan fungsi ini dilaksanakan apabila halaman dimuatkan.

Tetapkan susun atur halaman yang dicetak

Kadangkala, kita perlu memastikan susun atur kandungan halaman memenuhi keperluan sebanyak mungkin semasa mencetak. Menggunakan Javascript, kami boleh menukar susun atur halaman dengan mudah untuk memastikan kandungan yang dicetak memenuhi keperluan pengguna.

Kod Javascript berikut menunjukkan cara menetapkan reka letak halaman bercetak:

function setPrintLayout() {
  var style = document.createElement('style');
  style.innerHTML = '@page {size: A4 portrait;}';
  document.head.appendChild(style);
}

window.onload = setPrintLayout;

Salin selepas log masuk

Di sini, kami mentakrifkan fungsi yang dipanggil setPrintLayout. Dalam fungsi ini, kami mencipta elemen gaya menggunakan kaedah createElement. Kemudian, kami menggunakan innerHTML untuk menetapkan gaya CSS, "@page {size: A4 portrait;}". Ini akan menjadikan susun atur halaman kepada saiz A4 dengan tetapan landskap ditetapkan kepada "potret" untuk dicetak. Akhir sekali, kami menambah gaya pada pengepala dokumen menggunakan kaedah appendChild dan memanggil fungsi ini apabila halaman dimuatkan.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara untuk menyediakan pencetakan menggunakan Javascript. Dengan menetapkan gaya cetakan, menyembunyikan dan meletakkan elemen halaman, kami boleh memastikan halaman bercetak memberikan pengalaman pengguna yang terbaik dengan mudah. Jika anda sedang membangunkan aplikasi web dan perlu menyediakan fungsi pencetakan, menggunakan teknik Javascript mudah ini mungkin berguna.

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