Mengapa kandungan borang hilang selepas memilih sebahagian daripada kandungan untuk dicetak dalam javascript?

JavaScript Apabila memilih sebahagian daripada kandungan untuk dicetak, kandungan borang kadangkala hilang Ini kerana penyemak imbas hanya mencetak bahagian halaman yang kelihatan secara lalai semasa mencetak, dan bahagian borang biasanya tersembunyi dan bukan dalam kawasan yang kelihatan. halaman , dan oleh itu diabaikan secara lalai. Artikel ini akan menunjukkan kepada anda cara menyelesaikan masalah ini.

Penerangan Masalah

Apabila kami menggunakan kaedah window.print() JavaScript untuk mencetak halaman, kami sering mendapati bahawa sebahagian daripada borang tidak dicetak, tetapi hanya bahagian halaman yang kelihatan dicetak. Ini kerana kelakuan lalai penyemak imbas adalah untuk mencetak hanya bahagian halaman yang kelihatan, dan bahagian borang biasanya tersembunyi dan bukan dalam kawasan halaman yang kelihatan, jadi ia diabaikan secara lalai.

Penyelesaian

Untuk menyelesaikan masalah ini, kita perlu menggunakan pertanyaan media @media dalam CSS. Pertanyaan media @media ialah teknologi CSS yang boleh menyediakan helaian gaya yang berbeza untuk halaman web berdasarkan jenis media yang berbeza untuk disesuaikan dengan peranti terminal yang berbeza. Kita boleh menggunakan pertanyaan media @media untuk mengawal cara borang dipaparkan apabila dicetak.

Langkah pelaksanaan khusus adalah seperti berikut:

1. Tentukan pertanyaan media @media dalam helaian gaya CSS:

@media print {
    /* 这里写规则 */
}

2. Dalam @media Peraturan paparan borang yang ditulis dalam pertanyaan media:

@media print {
    form {
        display: block;
        visibility: visible;
    }
}

Dalam kod di atas, kami menggunakan paparan dua atribut dan keterlihatan untuk mengawal kesan paparan borang semasa mencetak . Tetapkan sifat paparan untuk disekat untuk memaparkan borang;

3. Tulis gaya halaman semasa mencetak dalam pertanyaan media @media:

@media print {
    form {
        display: block;
        visibility: visible;
    }
    
    /* 这里写其他规则，如文字大小、背景图等 */
}

Dalam kod di atas, kami juga boleh menambah peraturan lain, seperti Saiz teks, imej latar belakang, dsb. untuk mencapai kesan cetakan yang lebih baik.

4. Panggil kaedah window.print() dalam JavaScript dalam halaman HTML

Akhir sekali, panggil kaedah window.print() dalam JavaScript dalam halaman HTML , tetingkap cetakan sepatutnya sudah mengandungi kandungan bahagian borang.

<button onclick="window.print()">打印</button>

Ringkasan

Artikel ini memperkenalkan masalah kandungan borang yang hilang apabila memilih sebahagian daripada kandungan untuk dicetak dalam JavaScript dan mencadangkan kaedah untuk menggunakan pertanyaan media @media untuk menyelesaikan masalah ini . Dengan menetapkan peraturan dalam pertanyaan media @media, kami boleh membuat paparan borang dengan betul semasa mencetak, dengan itu mencapai hasil cetakan yang lebih baik.

Atas ialah kandungan terperinci Mengapa kandungan borang hilang selepas memilih sebahagian daripada kandungan untuk dicetak dalam javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!