Situs print area tartamtu CSS

Tau kudu print mung area tartamtu saka situs? banjur, kanggo delimit area Cetak iki? CSS iki solusi!

masalah

sesawangan: Aku ana ing kabeh situs ing layar, lan tengen ing tengah iku jenis laporan (data tabulated). Carane print mung ing wilayah sing aku kasengsem?

solusi

kita ngerti, print @media CSS fitur sing ngijini kita ngontrol gaya sing bakal dicithak. Ayo kang katon ing loro kahanan.

“ora Print”

1° Case – print kabeh, nanging ngilangi siji utawa luwih wilayah print
Yen duwe area sing arep dibusak printing gampang, mung nggawe kelas siji “print @media” obscuring visibilitas lan nglebokake menyang unsur (tag html) sampeyan ora pengin print. Ing kasus ing ngisor iki, Diwangun kelas .notprint lan diutus menyang Div sing ngirim ora bisa dicithak.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<sirah>
  <title>ora Print</title>
  <jinis gaya="text/css">
      @media print { 
          .notprint { visibilitas:didhelikake; } 
      }
  </gaya>
</sirah>
<awak>
  <kuwat>Iki bakal dicithak!</kuwat>
  <div kelas="notprint">
      wis iki, ora dicithak!
  </div> 
  Kene sampeyan uga bakal dicithak!             
</awak>
</html>

“Ya Print”

2° Case – Kalebu wilayah siji ing print, lan ngilangi wong
Nanging apa bab nalika ngelawan, ing tembung liyane, lan yen aku pengin print mung area tartamtu, minangka Div, contone, lan ora pengin liyane Situs katon ing print. Punika kok iki Post! langit, uga bakal nggunakake print @media, mung beda pertimbangan. ing kasus iki, ndhelikake visibilitas kabeh (*) unsur ing situs lan, banjur, We menehi visibilitas kanggo mung unsur sing pengin kita print, kudune dados dening ID aku disebut #yesprint. supaya, kita bisa, contone, print mung isi a Div tartamtu.

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
<!DOCTYPE html>
<html>
<sirah>
  <title>Ya Print</title>
  <jinis gaya="text/css">
    @media print {
      * {
        visibilitas:didhelikake;
      }
 
      #yesprint {
        visibilitas:katon;
        posisi: Absolute;
        nduwur:0;
        kiwa:0;                                     
      }                                  
    }
  </gaya>
</sirah>
<awak>
  <kuwat>Iki ora bakal dicithak!</kuwat>  
  <div id="yesprint">
      Wis iki lan, mung iki, bakal dicithak!
  </div> 
  Kene uga ora bakal metu ing print!            
</awak>
</html>

Yen ora ana efek sing dipengini, iku bisa amarga cithakan kanggo bakal njupuk munggah sawetara gaya CSS ampas ndhuwur (rama). nyoba nggunakake !penting utawa nyetel kode kanggo meksa asil samesthine. Uga weruh yen ana apa tag jurang, tanpa opening utawa nutup.

Aku dites solusi iki ing Internet Explorer 9, Firefox 14.0.1 lan Chrome 21.0.1180.8. Kabeh muncul kanthi bener… Aku uga elinga, yen pengin print werna lan latar mburi, iki kudu nyetel langsung ing saben browser. contone, ora Internet Explorer, pindhah menyang> Page Setup menu lan ngaktifake pilihan “werna Print lan latar mburi“, minangka kapacak ing ngisor iki. jendhela iki, Sampeyan bisa nindakake setelan print liyane.

ndeleng uga: Dadi Div siro nalika printing | CSS dibedakaké Print.

sing… nggunakake ing dhewe resiko!

Total accesses: 14119

4 reviews “Situs print area tartamtu CSS

  1. Luan da Costa ngandika:

    Matur nuwun kanggo bantuan larang, Nanging nalika nyoba kanggo print div wis ora loading css ing,Aku malah wis digawe ing css astamiwa . Tak tips sembarang?

    • Nyalin kode persis kaya ing cilik saka Post kanggo server lan test kanggo ndeleng yen kerjane. Coba uga sijine CSS ditempelake langsung ing kaca (lan nggawe ora telpon external), mung kanggo tujuan testing. kadhangkala, yen sampeyan nggunakake kode CSS pihak katelu (minangka Plugins), Bisa uga ana ing sawetara tags sing ditetepake minangka penting!. Gunakake Firefox karo Firebug lan katon bener ngenali kelas utawa ID CSS sing kepingin ngganti. Gunakake pitunjuk kanggo Firebug iki! Lan ing…

Ninggalake a Reply

Panjenengan alamat email ora bisa diterbitake. Perangkat kothak ditandhani karo *