Buna ziua. Astăzi vom încerca să rezolvăm problema care apare în fața tuturor celor care încearcă să tipărească ceva pe site, și anume jquery printează div.
Problemă: jquery print div
Soluție: jquery print div
Mai întâi, trebuie să selectați divul dorit cu jQuery și să scrieți variabila variabilei (la urma urmei, vom imprima conținutul mai târziu):
Efectuat. Acum, să ne gândim cum este posibil în principiu să imprimați ceva pe JS? Soluția cea mai simplă (fără a utiliza nici un PDF acolo) este să utilizați funcția de imprimare. Dar această funcție este numai pentru obiectul ferestrei, așa că trebuie să creați acest element în fundal și să apelați funcția de imprimare.
Deci, creați o iframe (va fi recipientul ferestrei noastre noi):
Ei bine, acum obținem documentele și ferestrele din iFrame nou creat:
Obiectul de document (în variabila doc) trebuie să imprimați datele pentru tipărire și fereastra (în win win variabilă) - pentru a determina imprimarea efectivă.
Acum, să afișăm datele de imprimare în iframe (de asemenea, puteți adăuga un stil special pentru imprimare, consultați articolul jsFiddle la sfârșitul articolului).
Și tipăriți:
Efectuat. Dialogul de tipărire este deschis, în timp ce tipărim doar conținutul unui anumit div (jQuery print out a div) și nu afișăm ferestrele pop-up inutile.
Decorăm rezultatele: jQuery print div
Ce se poate face pentru a îmbunătăți ceea ce avem?
1) Să eliminăm iFrame-ul creat, pentru a nu mări greutatea paginii în memoria RAM (și dintr-o dată persoana apasă din nou butonul "print"):
2) Să adăugăm la conținutul tipărit o foaie de stil CSS:
Mai întâi, specificăm stilurile din variabila (sau puteți specifica direct legătura cu un fișier CSS extern):
Fiți atenți la cip cu media = print. Aceasta înseamnă că stilurile sunt executate numai pe imprimantă (aceasta este mai mult o caracteristică, în cazul nostru, decât un adevărat plus).
Următorul cod: fiecare eveniment va fi gri. Puteți specifica mai multe stiluri sau un fișier extern CSS.
Și adăugați această variabilă la datele pe care le punem în iframe tipărit. Pentru aceasta, modificați puțin valoarea în variabila html_to_print descrisă mai sus:
Desigur, implementarea jquery pentru a imprima un div poate fi diferită, sper că ideea implementării a fost transferată.
Pentru a vedea demo-ul de lucru al codului jquery de mai sus, puteți imprima div pe jsFiddle. sau chiar mai jos:
Dacă mașina se descompune sau ești prea leneș să conduci, serviciul de taxi de la Moscova te poate ajuta să ajungi la destinație. Drivere Grammotnye, servicii de calitate, nu scumpe.
- Cum se definește textul în jquery select ...
- Efectuarea unui jquery de slider infinit ...
- Îmbunătățirea derulării paginii pe ...
Articole similare
Trimiteți-le prietenilor: