jquery percetakan tidak lengkap

Tajuk: Pemahaman mendalam tentang punca dan penyelesaian pencetakan tidak lengkap dalam jQuery

Kata Pengantar:

Dalam proses menggunakan jQuery, kami sering menghadapi masalah pencetakan yang tidak lengkap, seperti seperti apabila menggunakan fungsi print (), kadangkala hanya sebahagian daripada kandungan akan dicetak tetapi bukan semua kandungan. Masalah ini mungkin tidak mudah ditemui, tetapi ia menyebabkan beberapa masalah untuk pembangunan. Artikel ini akan menyelidiki sebab mengapa jQuery mencetak tidak lengkap dan menyediakan beberapa penyelesaian.

1. Analisis sebab

Pertama sekali, kita perlu menjelaskannya: sebab pencetakan jQuery yang tidak lengkap bukanlah masalah dengan jQuery itu sendiri. Ia disebabkan oleh beberapa batasan dan mekanisme penyemak imbas.

Khususnya, apabila terdapat sejumlah besar imej atau gaya CSS kompleks dalam halaman, penyemak imbas akan memuatkan halaman dalam bahagian dan fungsi print() hanya akan mencetak kandungan yang dimuatkan. Jadi, jika kandungan kami dibahagikan kepada beberapa bahagian, dan satu bahagian belum dimuatkan, fungsi print() tidak akan mencetaknya.

Selain itu, sesetengah penyemak imbas juga akan mengehadkan fungsi print() Contohnya, dalam penyemak imbas Safari, hanya kandungan yang dipaparkan dalam tetingkap semasa akan dicetak. Dalam Firefox, hanya kandungan di bahagian atas tetingkap semasa akan dicetak.

2. Penyelesaian

1. Masalah gaya CSS

Untuk masalah gaya CSS, kami boleh menggunakan @media print{} untuk mengoptimumkan kesan pencetakan. Sebagai contoh, kita boleh menggunakan kod berikut untuk membetulkan perubahan gaya CSS yang berlaku semasa pencetakan.

@cetakan media {
badan * {

visibility: hidden;

}
.bekas-cetak, .bekas-cetak * {

visibility: visible;

}
. bekas cetakan {

position: absolute;
left: 0;
top: 0;

}
}

Fungsi kod ini adalah untuk menetapkan semua elemen dalam halaman kepada keadaan tidak kelihatan semasa mencetak, dan kemudian dalam bekas bekas cetakan Tetapkan keterlihatan elemen, dan akhirnya tetapkan kedudukan bekas ini kepada kedudukan mutlak. Dengan cara ini, integriti halaman yang dicetak dalam fungsi print() boleh dicapai.

2. Masalah pemuatan halaman

Untuk masalah pemuatan bersegmen penyemak imbas, kita boleh mengelakkan masalah pencetakan tidak lengkap dengan menggunakan fungsi window.print() untuk melaksanakan langkah- operasi mengikut langkah. Secara khusus, kita boleh merangkum operasi langkah demi langkah seperti berikut:

function printPage() {
var pages = document.getElementsByTagName('section'),

  totalPages = pages.length,
  currentPage = 0;

function printCurrentPage () {

var printing = window.open('', '', 'width=800,height=600');
printing.document.write(pages[currentPage].innerHTML);
printing.document.close();
printing.focus();
setTimeout(function() {
  printing.print();
  printing.close();
  if (currentPage < totalPages - 1) {
    currentPage ++;
    printCurrentPage();
  }
}, 1000);

}
printCurrentPage();
}

Fungsi kod ini adalah untuk membahagikan halaman kepada halaman mengikut setiap bahagian, dan kemudian mencetaknya dalam urutan melalui rekursi, dan akhirnya mencapai kesan percetakan yang lengkap.

3. Isu sekatan penyemak imbas

Untuk isu sekatan penyemak imbas, kami boleh menyediakan penyelesaian yang berbeza untuk penyemak imbas yang berbeza. Contohnya, dalam penyemak imbas Safari, kita boleh menggunakan kod berikut untuk mencetak:

if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') = = -1) {
var printContent = document.getElementsByClassName('.print-container')[0];
var WinPrint = window.open('', '', 'width=1600,height= 1200 ');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
setTimeout(function() {

rreee

}, 1000);
} else {
window.print();
}

Fungsi kod ini ialah apabila penyemak imbas adalah Safari, kami akan memuatkan semula kandungan untuk dicetak dahulu, dan kemudian print; untuk pelayar lain, gunakan fungsi window.print() terus untuk mencetak.

Tamat:

Artikel ini hanya menerangkan secara ringkas sebab-sebab pencetakan tidak lengkap jQuery dan beberapa penyelesaian Sebenarnya, masalah yang lebih kompleks tidak disertakan di sini. Jika pembangun menghadapi beberapa masalah yang lebih kompleks semasa proses pembangunan, mereka boleh menyelesaikan masalah ini dengan melihat dokumen dan maklumat yang berkaitan serta berkomunikasi dengan pembangun lain.

Atas ialah kandungan terperinci jquery percetakan tidak lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!