ਪ੍ਰਿੰਟ ਸਾਈਟ ਖਾਸ ਖੇਤਰ CSS

ਕਦੇ ਸਿਰਫ ਸਾਈਟ ਦੀ ਇੱਕ ਖਾਸ ਖੇਤਰ ਦੇ ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਫਿਰ, ਇਸ ਪਰਿੰਟ ਖੇਤਰ ਦੇ delimit ਨੂੰ? CSS ਹੱਲ ਹੈ!

ਸਮੱਸਿਆ ਨੂੰ

ਨਜ਼ਾਰੇ: ਮੈਨੂੰ ਉੱਥੇ ਸਕਰੀਨ 'ਤੇ ਸਾਰੀ ਸਾਈਟ ਸੀ, ਅਤੇ ਇਸ ਨੂੰ ਦੀ ਰਿਪੋਰਟ ਦੀ ਇੱਕ ਕਿਸਮ ਦੀ ਦੇ ਮੱਧ ਵਿੱਚ ਸੱਜੇ (tabulated ਡਾਟਾ). ਸਿਰਫ ਖੇਤਰ ਦਾ ਹੈ, ਜੋ ਕਿ ਮੈਨੂੰ ਦਿਲਚਸਪੀ ਸੀ ਪ੍ਰਿੰਟ ਕਰਨਾ ਹੈ?

ਹੱਲ ਹੈ

ਸਾਨੂੰ ਪਤਾ ਹੈ ਦੇ ਰੂਪ ਵਿੱਚ, @media ਪ੍ਰਿੰਟ CSS ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਜੋ ਕਿ ਸਾਡੇ ਲਈ ਸ਼ੈਲੀ ਜੋ ਕਿ ਛਾਪੇ ਜਾਣਗੇ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਸਹਾਇਕ ਹੈ,. ਦੇ ਦੋ ਹਾਲਾਤ 'ਤੇ ਗੌਰ ਕਰੀਏ.

“ਨਾ ਪ੍ਰਿੰਟ”

1° ਕੇਸ – ਪ੍ਰਿੰਟ ਕਰੋ ਸਭ, ਪਰ ਪ੍ਰਿੰਟ ਦੇ ਇੱਕ ਜ ਹੋਰ ਖੇਤਰ ਨੂੰ ਵੱਖ
ਤੁਹਾਨੂੰ ਇੱਕ ਖੇਤਰ ਤੁਹਾਨੂੰ ਨੂੰ ਹਟਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ ਜਦ ਪ੍ਰਿੰਟਿੰਗ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਸਿਰਫ ਇੱਕ ਦੇ ਅੰਦਰ ਇੱਕ ਕਲਾਸ ਬਣਾਉਣ “@media ਪ੍ਰਿੰਟ” ਦਿੱਖ ਗਿਆਨਹੀਣ ਅਤੇ ਤੱਤ ਕਰਨ ਲਈ ਇਸ ਨੂੰ ਨਿਰਧਾਰਤ (ਟੈਗ HTML) ਤੁਹਾਨੂੰ ਛਾਪਣ ਲਈ ਨਾ ਕਰਨਾ ਚਾਹੁੰਦੇ. ਹੇਠ ਕੇਸ ਵਿੱਚ, ਇਹ ਕਲਾਸ ਬਣਾਇਆ ਗਿਆ ਸੀ .notprint ਅਤੇ ਇੱਕ Div ਹੈ, ਜੋ ਕਿ ਛਾਪੇ ਨਾ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਨੂੰ ਦਿੱਤਾ.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype HTML>
<HTML>
<ਸਿਰ '>
  <ਦਾ ਸਿਰਲੇਖ>ਨਾ ਪ੍ਰਿੰਟ</ਦਾ ਸਿਰਲੇਖ>
  <ਸ਼ੈਲੀ ਦੀ ਕਿਸਮ="text/css">
      @ਮੀਡੀਆ ਛਾਪੋ { 
          .notprint { ਦਿੱਖ:ਓਹਲੇ; } 
      }
  </ਸ਼ੈਲੀ>
</ਸਿਰ '>
<ਸਰੀਰ ਨੂੰ>
  <ਮਜ਼ਬੂਤ>ਇਹ ਛਪਾਈ ਕੀਤੀ ਜਾਵੇਗੀ!</ਮਜ਼ਬੂਤ>
  <Div ਕਲਾਸ="notprint">
      ਇਸ, ਛਾਪੇ ਨਹੀ ਕੀਤਾ ਜਾ!
  </Div> 
  ਇੱਥੇ ਤੁਹਾਨੂੰ ਇਹ ਵੀ ਛਾਪੇ ਜਾ ਜਾਵੇਗਾ!             
</ਸਰੀਰ ਨੂੰ>
</HTML>

“ਜੀ ਪ੍ਰਿੰਟ”

2° ਕੇਸ – ਪ੍ਰਿੰਟ ਵਿਚ ਇਕ ਵੀ ਖੇਤਰ ਦੇ ਸ਼ਾਮਲ ਕਰੋ, ਅਤੇ ਹੋਰ ਵੱਖ
ਪਰ ਕੀ ਜਦ ਉਲਟ, ਨੂੰ ਹੋਰ ਸ਼ਬਦ ਵਿੱਚ, ਅਤੇ ਮੈਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਖਾਸ ਖੇਤਰ ਨੂੰ ਪਰਿੰਟ ਕਰਨ ਲਈ ਚਾਹੁੰਦੇ ਹੋ, ਜੇਕਰ, ਨੂੰ ਇੱਕ Div ਤੌਰ, ਉਦਾਹਰਨ ਲਈ, ਅਤੇ ਸਾਈਟ ਦੀ ਬਾਕੀ ਦੇ ਪ੍ਰਿੰਟ ਵਿਚ ਪ੍ਰਗਟ ਨਾ ਕਰਨਾ ਚਾਹੁੰਦੇ. ਇੱਥੇ ਇਸ ਪੋਸਟ ਦੀ! ਸਾਫ, ਇਹ ਵੀ ਵਰਤ ਕਰੇਗਾ @media ਪ੍ਰਿੰਟ, ਸਿਰਫ ਵੱਖਰੇ ਵਿਚਾਰ. ਇਸ ਮਾਮਲੇ 'ਚ, ਸਭ ਦੀ ਦਿੱਖ ਨੂੰ ਛੁਪਾਉਣ (*) ਸਾਈਟ ਦੀ ਤੱਤ ਹੈ ਅਤੇ, ਫਿਰ, ਸਾਨੂੰ ਸਿਰਫ ਤੱਤ ਹੈ ਕਿ ਸਾਨੂੰ ਪਰਿੰਟ ਕਰਨ ਲਈ ਚਾਹੁੰਦੇ ਦਿੱਖ ਦੇਣ, ਵਿਧੀਵੱਧ ਇੱਕ ID ਹੈ ਮੈਨੂੰ ਬੁਲਾਇਆ ਦੁਆਰਾ ਨਿਯੁਕਤ #yesprint. ਇਸ ਲਈ, ਹੋ ਸਕਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਖਾਸ Div ਦੇ ਸਿਰਫ ਸਮੱਗਰੀ ਨੂੰ ਛਾਪਣ.

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>
<ਸਿਰ '>
  <ਦਾ ਸਿਰਲੇਖ>ਜੀ ਪ੍ਰਿੰਟ</ਦਾ ਸਿਰਲੇਖ>
  <ਸ਼ੈਲੀ ਦੀ ਕਿਸਮ="text/css">
    @ਮੀਡੀਆ ਛਾਪੋ {
      * {
        ਦਿੱਖ:ਓਹਲੇ;
      }
 
      #yesprint {
        ਦਿੱਖ:ਉਪਲੱਬਧ;
        ਸਥਿਤੀ: ਅਸਲੀ;
        ਚੋਟੀ ਦੇ:0;
        ਨੂੰ ਛੱਡ:0;                                     
      }                                  
    }
  </ਸ਼ੈਲੀ>
</ਸਿਰ '>
<ਸਰੀਰ ਨੂੰ>
  <ਮਜ਼ਬੂਤ>ਇਹ ਛਾਪੇ ਨਹੀ ਕੀਤਾ ਜਾ ਜਾਵੇਗਾ!</ਮਜ਼ਬੂਤ>  
  <Div ID="yesprint">
      ਹੀ ਇਸ ਨੂੰ ਅਤੇ, ਸਿਰਫ ਇਸ, ਛਪਾਈ ਕੀਤੀ ਜਾਵੇਗੀ!
  </Div> 
  ਇੱਥੇ ਇਹ ਵੀ ਪ੍ਰਿੰਟ ਵਿੱਚ ਬਾਹਰ ਆ ਨਹੀ ਕਰੇਗਾ!            
</ਸਰੀਰ ਨੂੰ>
</HTML>

ਜੇ ਉੱਥੇ ਕੋਈ ਲੋੜੀਦੇ ਪ੍ਰਭਾਵ ਹੈ, ਹੈ, ਸੰਭਵ ਇਸ ਦੇ ਟੈਪਲੇਟ ਕਾਰਨ ਉਪਰੋਕਤ ਕੁਝ CSS ਦੀ ਬਕਾਇਆ ਸ਼ੈਲੀ ਨੂੰ ਚੁੱਕਣਾ ਜਾ (ਪਿਤਾ ਨੂੰ). ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ !ਮਹੱਤਵਪੂਰਨ ਜ ਦਾ ਨਤੀਜਾ ਉਮੀਦ ਕੀਤੀ ਮਜਬੂਰ ਕਰਨ ਕੋਡ ਨੂੰ ਅਨੁਕੂਲ. ਇਹ ਵੀ ਦੇਖਣ ਨੂੰ ਹੁੰਦਾ ਹੈ, ਜੇ ਕੋਈ ਵੀ ਟੈਗ ਘਾਟੀ, ਖੁੱਲਣ ਜ ਬੰਦ ਕਰਨ ਨੂੰ ਬਿਨਾ.

ਮੈਨੂੰ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਵਿੱਚ ਇਸ ਦਾ ਹੱਲ ਟੈਸਟ 9, ਫਾਇਰਫਾਕਸ 14.0.1 ਅਤੇ Chrome 21.0.1180.8. ਸਾਰੇ ਠੀਕ ਕੰਮ ਕਰਨ ਲਈ ਸੀ… ਮੈਨੂੰ ਇਹ ਵੀ ਯਾਦ ਹੈ, ਹੈ, ਜੋ ਕਿ ਤੁਹਾਨੂੰ ਰੰਗ ਅਤੇ ਪਿਛੋਕੜ ਚਿੱਤਰ ਛਾਪਣ ਲਈ ਚਾਹੁੰਦੇ ਹੋ, ਜੇਕਰ, ਇਸ ਨੂੰ ਸਿੱਧੇ ਹਰ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਕੋਈ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ, ਫਾਇਲ ਨੂੰ ਚੋਣ ਨੂੰ ਯੋਗ ਜਾਣ> ਪੰਨਾ ਸੈੱਟਅੱਪ ਮੇਨੂ ਅਤੇ “ਪ੍ਰਿੰਟ ਦੇ ਰੰਗ ਅਤੇ ਪਿਛੋਕੜ ਚਿੱਤਰ“, ਹੇਠ ਦਿਖਾਇਆ ਦੇ ਤੌਰ ਤੇ. ਇਸ ਵਿੰਡੋ ਵਿੱਚ, ਇਸ ਨੂੰ ਹੋਰ ਪ੍ਰਿੰਟ ਸੈਟਿੰਗ ਨੂੰ ਕਰਨ ਲਈ ਸੰਭਵ ਹੈ.

ਨੂੰ ਵੀ ਵੇਖਣ: ਅਦਿੱਖ Div ਬਣੋ ਨੂੰ ਪਰਿੰਟ ਕਰਨ ਲਈ | CSS ਵੱਖਰੇ ਪ੍ਰਿੰਟ.

ਹੈ, ਜੋ ਕਿ… ਆਪਣੇ ਖੁਦ ਦੇ ਖਤਰੇ 'ਤੇ ਵਰਤਣ ਦੀ!

ਕੁੱਲ ਐਕਸੈੱਸ: 14119

4 ਸਮੀਖਿਆ “ਪ੍ਰਿੰਟ ਸਾਈਟ ਖਾਸ ਖੇਤਰ CSS

  1. Luan da Costa ਨੇ ਕਿਹਾ ਕਿ:

    ਮਹਿੰਗਾ ਮਦਦ ਲਈ ਧੰਨਵਾਦ, ਪਰ ਜਦ ਮੇਰੇ Div ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ CSS ਨੂੰ ਲੋਡ ਨਹੀ ਹੈ,ਮੈਨੂੰ ਵੀ ਛਪਾਈ ਲਈ CSS ਨੂੰ ਬਣਾਇਆ ਹੈ . ਕੋਈ ਵੀ ਸੁਝਾਅ ਸਵੀਕਾਰ?

    • ਬਿਲਕੁਲ ਪੋਸਟ ਤੁਹਾਡੇ ਸਰਵਰ ਅਤੇ ਟੈਸਟ ਕਰਨ ਲਈ ਦੀ ਮਿਸਾਲ ਵਿੱਚ ਦੇ ਰੂਪ ਵਿੱਚ ਕੋਡ ਨਕਲ ਕਰੋ, ਜੇ ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ ਨੂੰ ਵੇਖਣ ਲਈ. ਇਹ ਵੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਸਫ਼ੇ ਵਿੱਚ ਸਿੱਧੇ ਸ਼ਾਮਿਲ CSS ਪਾ (ਅਤੇ ਕੋਈ ਵੀ ਬਾਹਰੀ ਕਾਲ ਬਣਾਉਣ), ਸਿਰਫ ਟੈਸਟਿੰਗ ਦੇ ਮਕਸਦ ਲਈ. ਕਈ ਵਾਰ, ਤੁਹਾਨੂੰ ਤੀਜੀ-ਪਾਰਟੀ CSS ਕੋਡ ਵਰਤ ਰਹੇ ਹਨ, ਜੇਕਰ (ਪਲੱਗਇਨ ਦੇ ਤੌਰ ਤੇ), ਇਸ ਨੂੰ ਕਿਸੇ ਵੀ ਟੈਗ ਹੈ, ਜੋ ਕਿ ਬਹੁਤ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਹੋ ਸਕਦਾ ਹੈ!. Firebug ਨਾਲ ਫਾਇਰਫਾਕਸ ਵਰਤੋ ਅਤੇ ਠੀਕ ਵੇਖੋ ਕਲਾਸ ਜ IDs CSS ਤੁਹਾਨੂੰ ਤਬਦੀਲ ਕਰਨ ਲਈ ਚਾਹੁੰਦੇ ਹਨ, ਦੀ ਪਛਾਣ. ਇਸ Firebug ਦਾ ਸੰਕੇਤਕ ਨੂੰ ਵਰਤੋ! ਅਤੇ ਇਸ 'ਤੇ…

ਕੋਈ ਜਵਾਬ ਛੱਡਣਾ

ਤੁਹਾਡਾ ਈਮੇਲ ਪਤਾ ਪ੍ਰਕਾਸ਼ਿਤ ਨਹੀ ਕੀਤਾ ਜਾ ਜਾਵੇਗਾ. ਦੀ ਲੋੜ ਹੈ ਖੇਤਰ ਦੇ ਨਾਲ ਮਾਰਕ ਕੀਤੇ ਹਨ, *