Fatih SoysaljQuery Print, ziyaretçinin web sayfanızın yalnızca belirli bir alanını yazdırmasına izin veren basit bir jQuery eklentisidir.
Özellikle navigasyon yönergeleri bulunan projelerde, yazdırılacak sayfanın yalın olabilmesi artık her zaman mümkün olamayabiliyor. Böyle durumlarda sayfanın sadece belirli bir bölümünün yazdırılması seçeneği önümüze çıkıyor. Bunun için kullandığım bir kütüphaneyi sizlerle paylaşmak istiyorum.
Nasıl kullanılır? (Örnek)
1. HTML öğenizin yazdırılabilir olmasını istediğiniz alana benzersiz bir ID belirtelim.
1 2 3 | <div id="printable"> "Yazdırılabilir alan burasıdır." </div> |
2. Belirtilen alanımızı yazdırmak için bir button oluşturalım.
1 | <button class="print"> Yazdır </button> |
3. jQuery kütüphanesini ve jQuery print eklentisini içeri aktaralım.
1 2 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jQuery.print.js"></script> |
4. Yazdır butonunda yazdırmak istediğimiz alanı yazdıralım.
1 2 3 4 5 6 7 | <script type='text/javascript'> $(function() { $("#printable").find('.print').on('click', function() { $.print("#printable"); //Yazdırma işlemini burada tetikliyoruz. }); }); </script> |
5. Yapılandırma ayarları (İsteğe bağlı)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | $(function() { $("#printable").find('.print').on('click', function() { $("#printable").print({ // Genel ayarlar globalStyles : false, // Geçerli URL bilgisini de yazdır mediaPrint : false, //Font stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata", //Gizli iframe yazdır iframe : false, // Bu alanı yazdırmaz noPrintSelector : ".avoid-this", // Üste ekleme yapar append : "Fatih Soysal<br/>", // Alta ekleme yapar prepend : "<br/>fatihsoysal.com", // Manuel olarak form verilerini yükler manuallyCopyFormValues: true, // Yazdırma sonrası kodu yeniden yapılandırır. deferred: $.Deferred(), // timeout timeout: 250, // Başlık title: null, // document tip doctype: '<!doctype html>' }); }); |
