मैं स्क्रीन स्टाइलशीट के साथ कैसे प्रिंट करूं?

Question

कई वेबसाइटें जो मैं उपयोग करती हूं, प्रिंट मीडिया के लिए वास्तव में खराब स्टाइलशीट हैं, लेकिन उनकी स्क्रीन स्टाइलशीट काफी अच्छी हैं।

क्या मेरे ब्राउज़र को प्रिंट स्टाइलशीट को अनदेखा करने और स्क्रीन स्टाइलशीट के साथ प्रिंट करने का कोई तरीका है?

मैं यह भी करना चाहूंगा जब मैं ग्राहकों को दोनों के बीच अंतर दिखाना चाहता हूं।

Comments

यदि विचाराधीन वेबसाइटें तृतीय-पक्ष की हैं, तो शायद आप Chrome के डेवलपर टूल (Ctrl + Shift + I) को आज़मा सकते हैं, फिर नोड / तत्व (इस मामले में प्रिंट स्टाइलशीट) पर राइट-क्लिक करें और चुनें Delete This Node।

— दावानखाना

यह एक डुप्लिकेट है!

— vy32

देखें: stackoverflow.com/questions/9540990/…

— MicroMachine

आपके प्रश्न का सीधा उत्तर नहीं है, लेकिन अगर फ़ायरफ़ॉक्स पर, आप केवल इस बात से नाराज़ हैं कि सभी लिंक प्रिंट पूर्वावलोकन पर अपने पूर्ण URL के साथ संलग्न हैं (जिसने भी सोचा था कि यह एक बढ़िया विचार है die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)) बस निरीक्षण तत्व (देव उपकरण ) खोलें ) , स्टाइल एडिटर पर जाएं , स्टाइल के साथ स्टाइलशीट को खोजने के लिए दाईं ओर दिए गए आसान @media नियमों की सूची का उपयोग करें और printफिर printलागू किए गए सभी नियमों को हटा दें a[href]। फिर प्रिंट पूर्वावलोकन को फिर से लॉन्च करें।

— एडीटीसी

Answer 1

Chrome डेवलपर टूल ( Ctrl+ Shift+ I) का उपयोग करना केवल एक चीज है जो मैंने पाया है कि काम करता है।

1. media="screen"उस विशेषता के सभी उदाहरण खोजें और हटाएं।
2. फिर media="print"उस पूरे लिंक को खोजें और डिलीट करें।
3. फिर मुद्रण का प्रयास करें।

यह आम तौर पर मुझे स्क्रीन स्टाइल के साथ पेज देता है।

यदि आप वास्तव में सिर्फ प्रिंट शैलियों को निष्क्रिय करना चाहते हैं, तो आप वेब डेवलपर एक्सटेंशन स्थापित कर सकते हैं (मुझे लगता है कि फ़ायरफ़ॉक्स और क्रोम के लिए एक संस्करण है)। इसमें प्रिंट शैलियों को अक्षम करने के लिए एक बटन है। हालांकि, यह प्रिंट करने के लिए "स्क्रीन" शैली का विस्तार नहीं करता है, इसलिए अधिकांश समय यह आपके द्वारा अपेक्षित तरीके से काम नहीं करता है।

Comments

धन्यवाद। यह एक महान समाधान है। अवसादग्रस्त, लेकिन महान। मुख्य वेबसाइट जिसकी मुझे समस्या है, वायर्ड है, जो किन्हीं कारणों से बहुत बुरी तरह प्रिंट करती है लेकिन स्क्रीन पर बहुत अच्छी लगती है।

— v3232

मुझे एक प्लगइन की आवश्यकता है जो ऐसा करता है।

— vy32

@ vy32 जो एक बुरा विचार नहीं है। मैं कुछ समय के लिए क्रोम एक्सटेंशन के साथ खेलना चाहता था। छुट्टियों के दौरान मुझे आखिरकार कुछ घंटे मिले। तो यहाँ PrintScreen है, एक छोटा बटन जिसे आप क्लिक करते हैं जब किसी पृष्ठ में कस्टम प्रिंट / स्क्रीन सीएसएस मीडिया चयनकर्ता होते हैं। लिंक

— जेम्स

PrintScreen बटन इतनी अच्छी तरह से काम नहीं करता है ???

— v3232

मुझे संदेह है कि यह एक उपयोगकर्ता अनुभव का मुद्दा है। आम तौर पर मैंने उपयोगकर्ता अनुभव पर अधिक ध्यान केंद्रित किया, लेकिन इस बार मैं सिर्फ नई तकनीकों और प्रणालियों के साथ खेल रहा था, और ध्यान देने में विफल रहा। PS बटन पर क्लिक करने के बाद आपको सामान्य तरीके से प्रिंट पर क्लिक करना होगा। आप सही हैं, यह अधिक समझ में आता है अगर मेरे पास एक्सटेंशन सीधे प्रिंट होता है। यदि मेरे पास इस सप्ताह का समय है तो मैं प्रिंट स्क्रीन पर सीधे जाने के लिए एक्सटेंशन को अपडेट करने का प्रयास करूंगा क्योंकि यह वास्तव में होना चाहिए। साभार

— जेम्‍स

Answer 2

जेम्स विचार के बाद लेकिन jQuery का उपयोग कर:

$('*[media="screen"],*[media="print"]').attr('media', '')

यदि पेज में jQuery नहीं है, तो उसे इंजेक्ट करें:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);

Answer 3

डेवलपर टूल में सीधे मीडिया इम्यूलेशन चुनने के लिए एक नया तरीका है, https://stackoverflow.com/questions/9540990/use-chromes-element-inspector-in-print-preview-mode/ देखें

Comments

यह काम। निर्देशों का पालन करें और "स्क्रीन" मीडिया प्रकार का चयन करें। फिर जब आप इसे प्रिंट करेंगे तो "स्क्रीन" का उपयोग करेंगे

— कार्ल जी

जैसे-जैसे सॉफ्टवेयर विकसित होता है, वैसे-वैसे स्टैकएक्सचेंज के जवाब दिए जाने चाहिए - यह एक चयनित जवाब होना चाहिए।

— मिशेल

Answer 4

मुझे इसे क्रोम में करने का एक आसान तरीका मिला ।

डेवलपर टूल खोलें> रेंडरिंग> इम्यूलेट सीएसएस मीडिया में 'स्क्रीन' चुनें।

अब प्रिंट करने का प्रयास करें। यह प्रिंट सीएसएस के बजाय स्क्रीन सीएसएस ले जाएगा।

Comments

कौन सा वेब ब्राउज़र?

— vy32

क्रोम ब्राउज़र में

— dj रॉक

यह काम करता है और सबसे तेज समाधान है!

— लॉरेंट

विशेष रूप से वर्तमान क्रोम पर: डेवलपर टूल खोलें। शीर्ष दाईं ओर 3-बिंदु मेनू> अधिक उपकरण> प्रतिपादन। सीएसएस मीडिया का अनुकरण करने के लिए नीचे स्क्रॉल करें।

— लॉरेंट

Answer 5

लियो को वहां एक अच्छा विचार था, लेकिन जेम्स ने जो कहा , वह बिल्कुल नहीं है : यह होना चाहिए

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

संकेत: आसान उपयोग के लिए बुकमार्क के रूप में निम्नलिखित को सहेजें:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

यह jQuery को प्री लोड करता है और इसके खत्म होने के लिए 2secs का इंतजार करता है, लेकिन अगर यह प्रतीक्षा पर्याप्त नहीं है, तो इसे फिर से चलाएं, इस बीच में jQuery लोड हो जाना चाहिए था।

Answer 6

1. जेम्स ने जो कुछ कहा ;)

   आप Chrome डेवलपर टूल सेटिंग (दाएं निचले कोने) को खोलने वाले आउटपुट की जांच कर सकते हैं और "ओवरराइड्स" विकल्प का चयन करें "सीएसएस मीडिया प्रिंट का चयन करें" -view। इस विकल्प को टॉगल करके आप प्रिंट और स्क्रीन दृश्य की तुलना कर सकते हैं। मज़े करो!

2. इस ऐडऑन को स्थापित करें: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

अब पृष्ठभूमि-चित्र और रंग भी मुद्रित होते हैं।

बग: सीएसएस स्प्राइट्स के साथ काम नहीं करता है।

EDIT: क्रोम ने 2014 में प्रिंट व्यू बदल दिया है, मुझे लगता है कि अब आपको लिंक किए गए ऐडऑन का उपयोग करने की आवश्यकता नहीं है।

Comments

"स्क्रीन के लिए" सीएसएस मीडिया को "इम्यूलेट सीएसएस मीडिया" सेट करने के लिए क्रोम डेवलपर टूल का उपयोग करना एकमात्र जवाब है जो काम करता है।

— बेंजामिन

Answer 7

मैं सिर्फ एक ऐसी वेबसाइट के साथ इस समस्या में भाग गया जिसमें एक सीएसएस फ़ाइल का उपयोग किया गया था @media printऔर @media screenइसलिए, अलग-अलग प्रिंट सीएसएस फ़ाइल को निष्क्रिय करने का समाधान मेरे लिए काम नहीं करता था। हालांकि मैं निश्चित रूप से सीएसएस को संपादित कर सकता हूं और पेज को देखते समय प्रिंट ब्लॉक पर टिप्पणी कर सकता हूं, उन बदलावों ने प्रिंट पूर्वावलोकन पर ध्यान नहीं दिया।

मुझे जो समाधान मिला वह फ़ायरफ़ॉक्स और क्रोम के लिए प्रिंट एडिट एक्सटेंशन था । यह आपको मुद्रण से ठीक पहले पृष्ठ को संपादित करने देता है, और @media screenपृष्ठ के लिए वेब शैली ( ) का उपयोग करने के लिए एक सरल बटन भी शामिल करता है ।

मुझे उस पैमाने को बदलना पड़ा जिसे मैं थोड़ा-थोड़ा करके प्रिंट कर रहा था, क्योंकि प्रिंट की सतह लगभग 17:22 का अनुपात है, जबकि मेरा ब्राउज़र लगभग 16: 9 है, इसलिए पृष्ठ पर कुछ सामान क्षैतिज रूप से थोड़ा भीड़ हो रहा था। मुझे अलग से पृष्ठभूमि के रंग और चित्र छापने में भी सक्षम होना पड़ा

Comments

इसने मेरे लिए पूरी तरह से काम किया। मैंने पहले ही 10 मिनट बिताए थे कि एक पाठ को बैंगनी में बदल दिया जाए क्योंकि मेरा प्रिंटर स्याही से निकल गया था। इस समाधान का उपयोग करके मैं एक्सटेंशन को स्थापित कर सकता हूं, वेब स्टाइल बटन दबाएं और दीवार पर यह काम किया :)

— क्रिस नेविल

Answer 8

कभी-कभी वेब साइटें सीएसएस का उपयोग यह निर्दिष्ट करने के लिए करती हैं कि विभिन्न शैलियों का उपयोग ऑन-स्क्रीन और प्रिंटिंग करते समय किया जाना चाहिए। यह अक्सर अच्छा होता है, लेकिन यह भ्रामक और समस्याग्रस्त भी हो सकता है। पृष्ठ के स्रोत कोड का निरीक्षण करें और कुछ इस तरह देखें:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

यह समस्या आम है एक कारण यह है कि लोकप्रिय बूटस्ट्रैप ढांचे का उपयोग करने वाली वेब साइटें सर्वव्यापी बूटस्ट्रैप.min.css फ़ाइल का उपयोग करती हैं , जिसमें ऊपर सीएसएस शैली होती है।

देखने के लिए महत्वपूर्ण बात है @media print। वेब साइटों में अक्सर जटिल संरचनाएं होती हैं और यह पृष्ठ को स्थानीय रूप से सहेजने और पुनरावर्ती पाठ-खोज उपकरण के साथ निरीक्षण करने में मदद कर सकती है।

जब आपको लगता है कि आपको सीएसएस कोड में जगह मिल गई है, तो आप इसके डेवलपर फीचर्स का उपयोग करके सीधे पेज को अपने ब्राउज़र में संशोधित कर सकते हैं। (क्रोम में आप उन्हें लॉन्च करने के लिए Ctrl+ Shift+ दबाते Iहैं।)

CSS कोड की खोज करें और समस्या को उत्पन्न करने वाली पंक्तियों को हटा दें या अमान्य कर दें। सत्यापित करें कि ऑपरेशन ने "प्रिंट पूर्वावलोकन" का उपयोग करके काम किया।

Answer 9

Greasemonkey एडऑन स्थापित करें और नीचे दी गई स्क्रिप्ट का उपयोग करें।

मैंने यहाँ मिली एक स्क्रिप्ट को संशोधित किया जो http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

मैंने अंत में "स्क्रीन" को "प्रिंट" में बदल दिया (मुझे jQuery के बारे में कोई पता नहीं है, इसलिए मुझसे कोई सवाल न करें) ताकि यह स्क्रीन संस्करण को प्रिंटर पर भेज सके। पीडीएफ पर प्रिंट करते समय, (फॉक्सिट या नाइट्रो पीडीएफ प्रिंटर का उपयोग करके), मैं पृष्ठ प्रकार को टैब्लेट एक्स्ट्रा को लैंडस्केप मोड में सेट करता हूं ताकि पीडीएफ का आकार स्क्रीन के आकार से कम या ज्यादा मेल खाता हो। का आनंद लें! याद रखें, मैं प्रोग्रामिंग के बारे में एक बात नहीं जानता, इसलिए इसका श्रेय मूल लेखक को जाता है।

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);

Answer 10

"Print background (colors & images)"विकल्प को सक्षम करने का प्रयास करें Page Setupऔर देखें कि यह कैसे दिखता है Print Preview(यह एफएफ के लिए है)।

Comments

वांछित परिणाम नहीं है। माफ़ करना।

— vy32

Answer 11

जेम्स के समान - क्रोम डेवलपर टूल में "स्रोत" टैब का उपयोग करें, और सभी उदाहरणों को प्रतिस्थापितmedia print करें media speech। इस प्रकार नेवर्स आदि को छिपाने के लिए सभी सीएसएस परिवर्तन छपाई के समय लागू नहीं किए जाएंगे (लेकिन जब पाठ-से-भाषण का उपयोग किया जाता है तो इसे लागू किया जाएगा)

यह ऊपर के रूप में JQuery के साथ उल्लेखनीय हो सकता है।

यह उपयोगी है क्योंकि मैं सीएसएस के सीडीएन का उपयोग कर रहा हूं ताकि अनुकूलन सही हो

Answer 12

मैक पर उस के लिए एक महान उपकरण है।

Paparazzi => कॉपी URL को Paparazzi => छवि को इस रूप में सहेजें => पीडीएफ

(पीडीएफ निर्यात में, यहां तक ​​कि पाठ का चयन करने योग्य नहीं है, यह सिर्फ एक "छवि" नहीं है)

https://derailer.org/paparazzi/screenshots

का आनंद लें :-)

Comments

दुर्भाग्य से, यह प्रोग्राम एक बिटमैप प्रिंट बनाता है, जिसका अर्थ है कि फोंट को व्यवस्थित किया गया है। यह वह नहीं है जो मैं चाहता हूं।

— vy32