web-dev-qa-db-ja.com

リンクの場所を印刷せずにWebサイトを印刷しますか？

単純なwindow.print（）;を使用して、ナビゲーターのprint関数を呼び出しています。コール。それは完璧に印刷します（画面に表示されるものを印刷したいので、特別なCSSを実際に使用して印刷しません）が、テキストリンクの隣にリンクの場所を表示します：

    Homepage (http://localhost)

明確にするために、印刷版のリンクの近くにリンクの場所を置きたくありません。CSSを制御できますが、この動作がどこにも定義されていないので、ナビゲーター関連の問題だと思います！

編集：これは、Firefox 3.6.8および最後のChrome、Ubuntu、Windows XP/Vistaで発生します。

javascripthtmlcssprinting
32
Adirael

CSS2準拠のブラウザからこのスタイルでページを印刷しているようです

http://www.alistapart.com/articles/goingtoprint/

CSS2に完全に準拠したブラウザーでは、リンクのURLを各リンクの後に括弧で挿入できるため、印刷物のコピーとWebブラウザーを手元に置いている人にとって非常に便利です。この効果を「コンテンツ」divに制限し、マストヘッドにURLを貼り付けないようにするルールを次に示します。

#content a:link:after, #content a:visited:after {    
  content: " ("attr(href) ") ";    
  font-size: 90%;   
}

MozillaやNetscape 6.xなどのGeckoベースのブラウザーで試してみてください。プリントアウト内のすべてのリンクの後に、リンクのURLが括弧内に表示されるはずです。

23
mplungjan

そのため、印刷されたWebページのリンク情報の追加の印刷を回避するには、_@media print_セクションに次のルールを追加します。

_a:link:after, a:visited:after {
    content: "";
}
_

これは、Homepage (http://localhost)のようなugいリンク情報を削除し、Homepageに減らします。もちろん、テキストセクションのみ（またはナビゲーションのみ）でそれを回避するルールを追加できますが、Webページの印刷形式でナビゲーションを表示しないでください。

46
mliebelt

内容： "";動作しません私はこれを使用します：

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";    
    }
}

これは無効になります！

12
Dajo

現在、コンテンツプロパティの使用は、すべての主要なブラウザで機能するはずです。

    @media print  - or -  <style type="text/css" media="print">

    a:link:after, a:visited:after {  
        content: normal; //TODO: add !important if it is overridden  
    }

ここのその他のオプション： CSS Content 。

ここでコンテンツ属性を使用するより便利な方法： CSS Tricks

7
tgursk

私のアプリサーバー（Rails）では、親セレクターを使用する必要がありました。 body要素は、ページ全体を選択するのに最適です。

body a:link:after, body a:visited:after {    
  content: "";
}
5
coloradoblue

Bootstrap 3を使用する場合、使用されるセレクタは次のとおりです。

a[href]:after { }

そして、次のようなものでオーバーライドできます：

a[href]:after {
   content: initial;
}
4
Mike Chelen

他のソリューションは（もう）クロスブラウザで動作しないことがわかりました。以下はFF 29で動作します。Chrome 35、IE 11：

a:link:after, a:visited:after {  
  content: normal !important;  
}
3
Jeroen K

多くのcssオプションが提案されていますが、各ページで強制されているヘッダー/フッターのリンクと見出しを削除したい場合は、あなた専用の設定があります。以下に示すように。

Remove Footer Links in Chrome Print View

それでおしまい。

1
Mohd Abdul Mujib

印刷に追加のCSSを使用します。

こちらをご覧ください： http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

1
Mchl

これを追加すると、これらの不要なリンクを削除できます。

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

これを読むと役立ちます

1
Rudias

私は同じ問題に直面しました、クロムを使用している場合、トリックは印刷ウィンドウを表示するときです、これには表示モードとその他のいくつかの設定を提供する左の設定パネルが含まれています。以下の名前のリンクがあります：more params or more config（フランス語で持っていたので翻訳しようとしました）、クリックすると追加オプションが表示されます。チェックボックス「ヘッダーとフッター」がオフになり、「localhost」が非表示になります。 ...」うまくいけばそれが役立つ

0
krachleur

上記のCSSを見つけて削除しましたが、役に立たなかったため、プロジェクト内の他の場所で見つけることができなかったため、jQueryを使用してリンクを削除しましたが、テキストは保持しました。

$('a[title="Show Profile"]').contents().unwrap();

詳細はこちら ハイパーリンクを削除してテキストを保持しますか？

0
Clinton Green