Chrome में प्रिंट करते समय href मान निकालने की आवश्यकता है


290

मैं प्रिंट सीएसएस को अनुकूलित करने का प्रयास कर रहा हूं, और यह पता लगाता हूं कि यह hrefमूल्य के साथ-साथ लिंक को भी प्रिंट करता है ।

यह क्रोम में है।

इसके लिए HTML:

<a href="http://www.google.com">Google</a>

यह प्रिंट करता है:

Google (http://www.google.com)

और मैं इसे प्रिंट करना चाहता हूं:

Google

1
ध्यान रखें कि प्रत्येक प्रमुख सीएसएस फ्रेमवर्क ऐसा क्यों करता है - आप कागज पर क्लिक नहीं कर सकते हैं! इसलिए यदि आप इसे निष्क्रिय करने जा रहे हैं, तो आपको नीचे दिए गए लिंक की एक सूची जोड़नी चाहिए, जैसे कि: alistapart.com/article/improvingprint
Julix

1
यह सच है, लेकिन मुझे लगता है कि लिंक कब और कहां दिखाई देता है, इसका नियंत्रण करना बेहतर है। उदाहरण के लिए, मेरे लिंक में मैं चाहता हूं कि वे पाठ के बाद अगली पंक्ति में दिखाई दें, और बिना कोष्ठक के। इसलिए मैं सिर्फ पाठ में यूआरएल दिखाता हूं।
user4052054

जवाबों:


602

बूटस्ट्रैप वही काम करता है (... नीचे चयनित उत्तर के रूप में)।

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

बस इसे वहां से हटा दें, या इसे अपनी प्रिंट स्टाइलशीट में ओवरराइड करें:

@media print {
  a[href]:after {
    content: none !important;
  }
}

17
<style>@media print{a[href]:after{content:none}}</style>ज्यादातर जब मैं इस पृष्ठ पर वापस आता रहता हूं, तो अपने आप को पोस्ट करता हूं, धन्यवाद
विलियम एंट्रीकेन

1
जाहिर तौर पर फाउंडेशन भी सेलिंग करता है।

ऐसा लगता है कि HTML5 Boilerplate भी ऐसा करता है! इसलिए मुझे लगता है कि मुझे अपनी वेबसाइट पर कोड परिवर्तन के माध्यम से और अन्य वेबसाइटों पर निरीक्षक के माध्यम से इसे ओवरराइड करना होगा ...
ADTC

चेतावनी: हमारे पास ऐसे मुद्दे थे जहां एक तालिका कभी-कभी छपाई करते समय पिछली कुछ पंक्तियों को खो देती है। यह पता चला कि यह नियम अपराधी था, या कम से कम इसे हटाने से यह मुद्दा तय हो गया। पता नहीं क्यों इसका वह असर था।
हेनरिक एन

1
@ हेनरिक - मुझे लगता है कि यह बूटस्ट्रैप स्तंभों से संबंधित है। float:noneजहाँ कुछ दिन पहले मेरे लिए एक समान मुद्दा तय करना आवश्यक था वहां का उपयोग करना; आपकी मदद कर सकता है, लेकिन यह एक अलग मुद्दा है
एंड्रयू 19

40

यदि ऐसा नहीं होता । आपके प्रिंट स्टाइलशीट में कहीं न कहीं आपके पास यह कोड होना चाहिए:

a[href]::after {
    content: " (" attr(href) ")"
}

केवल दूसरी संभावना यह है कि आपके पास इसके लिए एक एक्सटेंशन है।


1
मुझे यह ज़र्ब फाउंडेशन सीएसएस में मिला।
19


10

यदि आप निम्नलिखित सीएसएस का उपयोग करते हैं

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

सिर्फ मीडिया = "स्क्रीन" जोड़कर इसे निम्नलिखित शैली में बदलें

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

मुझे लगता है यह उचित होगा।

जैसे पूर्व उत्तर

    @media print {
  a[href]:after {
    content: none !important;
  }
}

क्रोम ब्राउज़ में अच्छी तरह से काम नहीं किया गया।


4

मुझे अपने एंकर में नेस्टेड img के साथ एक समान समस्या का सामना करना पड़ा:

<a href="some/link">
   <img src="some/src">
</a>

जब मैंने आवेदन किया था

@media print {
   a[href]:after {
      content: none !important;
   }
}

मैंने किसी कारण से अपनी img और पूरी लंगर चौड़ाई खो दी, इसलिए इसके बजाय मैंने उपयोग किया:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

जो पूरी तरह से काम किया।

बोनस टिप : प्रिंट पूर्वावलोकन का निरीक्षण करें


1

पेज url छिपाने के लिए।

media="print"शैली टेज उदाहरण में उपयोग करें :

<style type="text/css" media="print">
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
            @page { size: portrait; }
</style>

यदि आप लिंक हटाना चाहते हैं:

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}

-2

सामान्य उपयोगकर्ताओं के लिए। वर्तमान पृष्ठ का निरीक्षण विंडो खोलें। और इसमें टाइप करें:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

तब आपको प्रिंट पूर्वावलोकन में url लिंक दिखाई नहीं देंगे।


यदि आप जिस पृष्ठ को प्रिंट करने का प्रयास कर रहे हैं, उसके स्रोत कोड पर कोई नियंत्रण नहीं होने पर यह एक अच्छा समाधान है।
पद्ममैक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.