Beim Drucken in Chrome müssen href-Werte entfernt werden

290

Ich versuche, das Druck-CSS anzupassen, und stelle fest, dass es Links mit dem hrefWert sowie dem Link druckt .

Dies ist in Chrome.

Für diesen HTML:

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

Es druckt:

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

Und ich möchte, dass es gedruckt wird:

Google

— Chris Gratigny
quelle

1

Denken Sie daran, WARUM jedes wichtige CSS-Framework dies tut - Sie können nicht auf Papier klicken! Wenn Sie es also deaktivieren möchten,

— Julix

1

Das stimmt, aber ich denke, es ist besser zu kontrollieren, wann und wo der Link erscheint. In meinen Links möchte ich beispielsweise, dass sie in der nächsten Zeile nach dem Text und ohne Klammern angezeigt werden. Also zeige ich nur die URL im Text.

— user4052054

602

Bootstrap macht dasselbe (... wie die unten ausgewählte Antwort).

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

Entfernen Sie es einfach von dort oder überschreiben Sie es in Ihrem eigenen Druck-Stylesheet:

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

— Alex Ghiculescu
quelle

17

<style>@media print{a[href]:after{content:none}}</style>Meistens für mich selbst

— posten,

1

Anscheinend macht Foundation auch das Gleiche.

— Spasticninja

Sieht so aus, als würde HTML5 Boilerplate dies auch tun ! Also muss ich es wohl durch Codeänderung auf meiner eigenen Website und durch Inspector auf anderen Websites

— überschreiben

Warnung: Wir hatten Probleme, bei denen eine Tabelle beim Drucken manchmal die letzten Zeilen verlor. Es stellte sich heraus, dass diese Regel der Schuldige war, oder zumindest das Entfernen, um das Problem zu beheben. Ich weiß nicht, warum es diesen Effekt hatte.

— Henrik N.

1

@ HenrikN - Ich denke, das hängt mit schwebenden Bootstrap-Spalten zusammen. Wenn float:nonenötig, wurde vor ein paar Wochen ein ähnliches Problem für mich behoben. könnte Ihnen helfen, aber das ist ein anderes Problem

— Andrew

40

Das tut es nicht . Irgendwo in Ihrem Druck-Stylesheet müssen Sie diesen Codeabschnitt haben:

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

Die einzige andere Möglichkeit ist, dass Sie eine Erweiterung haben, die dies für Sie erledigt.

— Eric
quelle

1

Ich habe es in Zurb Foundation CSS bekommen.

— forX

26

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

Erweitern Sie das Snippet

Die Arbeit ist perfekt.

— JELEWA.de
quelle

10

Wenn Sie das folgende CSS verwenden

<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" />

Ändern Sie es einfach in den folgenden Stil, indem Sie media = "screen" hinzufügen.

<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" />

Ich denke es wird funktionieren.

die ersteren antworten wie

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

wurden nicht gut in der Chrom-Suche gearbeitet.

— Wang Jijun
quelle

4

Ich habe ein ähnliches Problem nur mit einem verschachtelten Bild in meinem Anker festgestellt:

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

Als ich mich bewarb

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

Ich habe aus irgendeinem Grund mein Bild und die gesamte Ankerbreite verloren und stattdessen Folgendes verwendet:

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

das hat perfekt funktioniert.

Bonus-Tipp : Überprüfen Sie die Druckvorschau

— TrampGuy
quelle

1

Seiten-URL ausblenden.

Verwendung media="print"im Stil Beispiel:

<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>

Wenn Sie Links entfernen möchten:

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

— Abd Abughazaleh
quelle

-2

Für normale Benutzer. Öffnen Sie das Inspektionsfenster der aktuellen Seite. Und tippe ein:

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

Dann werden die URL-Links in der Druckvorschau nicht angezeigt.

— Wen Xin
quelle

Dies ist eine gute Lösung, wenn Sie keine Kontrolle über den Quellcode der Seite haben, die Sie drucken möchten.

— Paddymac