स्क्रीन के रूप में उसी प्रिंट सीएसएस

Question

ऐसा लगता है कि वास्तव में इसका एक आसान समाधान होना चाहिए, लेकिन अब तक मैं एक खोजने में असफल रहा हूं।

मैं ज़र्ब फाउंडेशन का उपयोग कर रहा हूं और मैं मूल रूप से एक ऐसा फॉर्म बना रहा हूं जो एक फॉर्म (उपरोक्त) से इनपुट लेता है, और angular.js का उपयोग करके सामग्री (नीचे) में भर जाता है। उपयोगकर्ता पृष्ठ को पीडीएफ में प्रिंट करेंगे। मैं नीचे दी गई सामग्री के लिए लेआउट को बनाए रखना चाहता हूं, और प्रिंटिंग के दौरान उपरोक्त फॉर्म को छिपाना चाहता हूं। ज़र्ब में एक अच्छा "छुपाएं-प्रिंट-प्रिंट" सीएसएस नियम है जो ऐसा लगता है कि ऊपर दिए गए फॉर्म पर लागू होने पर इसे ठीक काम करना चाहिए, लेकिन जब मैं प्रिंट स्टाइलशीट टॉगल करता हूं, तो यह मूल रूप से सभी सीएसएस को स्ट्रिप्स करता है और बदसूरत हो जाता है।

सुझाव?

Answer 1

क्या आपने print मीडिया के लिए सीएसएस मीडिया प्रश्नों का उपयोग करने का प्रयास किया है?

.foo { 
    height:150px; 
    width:150px; 
    background-color:#F00 // see what I did there? 
} 

.bar { 
    height:10px; 
    width:50%; 
    border-radius:5px; 
    background-color:#000 
} 

.baz { 
    width:100px; 
    height:150px; 
    background-color:#FFF; 
} 

@media screen { 
    .baz { 
     display:block; 
    } 
} 

@media print { 
    .baz { 
     display:none; 
    } 
} 

अब, केवल .baz के गुण से कुछ मीडिया क्वेरी द्वारा लक्षित कर रहे हैं। आप प्रश्नों के अंदर या बाहर .baz के गुणों में से किसी एक को भी डाल सकते हैं। इसी प्रकार, आप मीडिया क्वेरी में के गुणों के सभी डाल सकते हैं, लेकिन मैं यह नहीं इकट्ठा करता हूं कि आप जो खोज रहे हैं वह नहीं है।

Answer 2

Zurb के प्रिंट स्टाइल शीट के बारे में idk और एक उदाहरण के बिना, यह जवाब देने के लिए बहुत मुश्किल है, लेकिन आप weasyprint, खुला स्रोत पुस्तकालय का उपयोग कर सकते पीडीएफ करने के लिए HTML/CSS कन्वर्ट करने के लिए https://github.com/Kozea/WeasyPrint

Answer 3

मैं इन प्रकार में क्या किया स्थितियों print.css के लिए एक अलग फ़ाइल का उपयोग करें।

<link rel="stylesheet" type="text/css" href="global.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

ब्राउज़र मुद्रण है, तो global.css फ़ाइल पहले लोड किया जाएगा और print.css फ़ाइल से aftewards कुछ भी लिख देगा।

हालांकि ध्यान रखें कि प्रिंटिंग के दौरान सभी background: * नियम डिफ़ॉल्ट रूप से सभी ब्राउज़रों में बंद हो जाएंगे, इसलिए कुछ शैलियों को बिना किसी समझौता किया जा रहा है।