在Chrome中打印时需要删除href值

我试图自定义打印CSS,并发现它打印出的链接与href值以及链接。

这是Chrome。

对于这个HTML:

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

它打印:

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

我想打印:

Google
143244 次浏览

它不。在你的打印样式表的某处,你必须有这段代码:

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

唯一的另一种可能是你有一个分机为你做。

Bootstrap做同样的事情(…如下所选答案)。

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

只需要从那里删除它,或者在你自己的打印样式表中重写它:

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

如果您使用以下CSS

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

不是很好地工作在chrome浏览。

我遇到了一个类似的问题,只有嵌套的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;
}
}

效果很好。

小贴士: 检查打印预览

正常用户。打开当前页面的检查窗口。 然后输入:

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

然后你将不会看到打印预览的url链接。

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

工作是完美的。

隐藏页面url。

在style tage示例中使用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;
}
}