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

290

我试图自定义打印CSS，并发现它会打印出带有href值和链接的链接。

这是在Chrome中。

对于此HTML：

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

它打印：

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

我希望它打印：

Google

— 克里斯·格拉蒂尼（Chris Gratigny）
source

1

请记住，为什么每个主要的CSS框架都会这样做-您不能在纸上单击！因此，如果要停用它，则应在底部添加一个链接列表，例如：alistapart.com/article/improvingprint

— Julix

1

没错，但是我认为最好控制链接出现的时间和位置。例如，在我的链接中，我希望它们出现在文本之后的下一行，并且不带括号。所以我只显示文本中的网址。

— user4052054

601

Bootstrap会做同样的事情（...与下面选择的答案相同）。

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

只需从此处删除它，或在您自己的打印样式表中覆盖它即可：

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

— 亚历克斯·吉库莱斯库
source

17

<style>@media print{a[href]:after{content:none}}</style>当我继续返回此页面时，大部分情况下是为自己发布的，谢谢

— William Entriken 2014年

1

显然，基金会也做同样的事情。

— spasticninja

看起来HTML5 Boilerplate也可以做到这一点！因此，我想我必须通过自己网站上的代码更改以及其他网站上的Inspector来覆盖它……

— ADTC '16

警告：我们遇到的问题是，在打印时，表格有时会丢失最后几行。原来，这是罪魁祸首，或者至少删除了它才解决了问题。不知道为什么会产生这种效果。

— 亨利克Ñ

1

@HenrikN-我认为这与引导程序列浮动有关。使用float:none必要的固定给我几个星期前一个类似的问题; 可能会帮助您，但这是一个不同的问题

— Andrew

40

不会的。在打印样式表中的某处，您必须具有以下代码段：

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

唯一的其他可能性是您需要扩展程序来为您执行此操作。

— 埃里克
source

1

我在zurb基础CSS中得到它。

— forX

26

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

展开摘要

做事完美。

— JELEWA.de
source

10

如果您使用以下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" />

只需通过添加media =“ screen”将其更改为以下样式

<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浏览器中效果不佳。

— 王继军
source

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

效果很好。

提示：检查打印预览

— 流浪汉
source

1

隐藏Page 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;
   }
}

— 阿卜杜·阿布哈扎莱（Abd Abughazaleh）
source

-2

对于普通用户。打开当前页面的检查窗口。并输入：

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

这样，您将不会在打印预览中看到url链接。

— 文欣
source

如果您无法控制要打印的页面的源代码，这是一个很好的解决方案。

— Paddymac '19