Rumah > Artikel > hujung hadapan web > jQuery mencetak kawasan tertentu halaman Html dan secara automatik paginate_jquery

jQuery mencetak kawasan tertentu halaman Html dan secara automatik paginate_jquery

WBOYasal: 2016-05-16 16:42:281507semak imbas

Dalam projek baru-baru ini, anda perlu mencetak halaman HTML Anda perlu menentukan kawasan untuk mencetak Gunakan pemalam jquery.PrintArea.js

Penggunaan:

$("div#printmain").printArea();

Tetapi kandungan di sebalik DIV masih akan dicetak Di sini anda boleh menggunakan CSS untuk mengawal halaman percetakan

<div style="page-break-after: always;"></div>

Kadangkala halaman akan dicetak secara berterusan walaupun CSS digunakan untuk mengawal paging Di sini anda boleh menggunakan parameter atribut dalam pemalam PrintArea.

Kod sumber separa PrintArea:

var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //自已扩展的属性，为满足变态需求 
pageTitle: ''};//自已扩展的属性，为满足变态需求

Dapat dilihat bahawa format atribut yang ditakrifkan dalam pemalam ialah JSON Beberapa atribut diperkenalkan di bawah

mod mentakrifkan dua atribut Apabila pop timbul ditentukan, tetingkap baharu akan dibuka, yang boleh dianggap sebagai halaman pratonton cetakan.

@popClose |. [boolean] |. (salah), benar Sama ada untuk membuka dan menutup halaman pratonton selepas cetakan selesai.

$("div#printmain").printArea({mode:"popup",popClose:true});

Dengan cara ini anda boleh menentukan percetakan DIV.

Mari kita bincangkan tentang tujuan dua atribut baharu yang saya tambahkan
twoDiv:
DIV kedua yang perlu dicetak sudah tentu halaman kedua ini agak panjang dan memerlukan paging automatik, dan setiap baris dalam jadual adalah berbeza Apabila dicetak di sini, satu baris boleh dicetak pada dua helai kertas.

Tajuk halaman:
DIV kedua dibahagikan kepada berbilang halaman, dan pengepala setiap halaman perlu sama Parameter ini ialah pengepala biasa.

Dua parameter ini sepadan dengan DIV dalam halaman, seperti:

<div id="pageTitle" style="display: none;">

Selepas halaman ditakrifkan, mari lihat cara halaman kami diproses dalam pemalam.

writeDoc.open(); 
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

Berikut ialah kod untuk menjana html

html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

Kaedah makna bersama ditakrifkan dalam pemalam Saya tidak membuat sebarang pengubahsuaian, jadi saya tidak akan menampalnya di sini.

Inilah pendapat saya:

Jika kita perlu membahagikan kandungan dalam DIV kepada berbilang halaman dan memastikan bahawa satu baris tidak menjangkau berbilang halaman, kita perlu bekerja keras untuk menghasilkan kod html.

Mula-mula cari semua baris dalam DIV Apabila ketinggian pengepala jadual biasa mencapai satu halaman selepas menambah baris ini, paging diperlukan Di sini, baris terakhir dalam halaman berlaku untuk menjangkau berbilang halaman dan menyimpan baris ini. Turun dan letakkan di halaman seterusnya.

Selepas setiap halaman dijana, anda perlu menambah teg penomboran CSS selepas teg HTML, supaya pencetak akan membuat penomboran dengan patuh.

Untuk menjelaskan, halaman pratonton yang dijana ialah halaman HTML, yang mempunyai pengepala dan maklumat DTD yang sepadan.

Sesetengah orang mungkin tahu bahawa terdapat hanya 4 halaman dalam pratonton, tetapi akan sentiasa ada satu halaman lagi semasa mencetak Dalam kes ini, anda perlu menyemak sama ada tanda penomboran dalam halaman yang anda hasilkan adalah sebelum teg HTML .
Tag facet mestilah selepas tag HTML, yang boleh menyelesaikan masalah mencetak satu halaman lagi.

PS:
Saya akan memuat naik pemalam JS saya yang diubah suai di bawah Disebabkan kitaran projek saya, banyak bahagian kod telah ditulis sehingga mati, hanya untuk menyelesaikan masalah pencetakan ini. Kod ini sangat tidak kemas, saya harap anda akan melihat dengan lebih dekat

Rakan sekerja juga berharap seseorang dapat mengoptimumkannya dan menjadikannya universal.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Perbandingan prestasi pemprosesan aksara antara Node.js dan PHP dan Python_node.jsArtikel seterusnya：Perbandingan prestasi pemprosesan aksara antara Node.js dan PHP dan Python_node.js

Artikel berkaitan

Lihat lagi