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

Posted 2023-02-14

【中文标题】在 Chrome 中打印时需要删除 href 值

【英文标题】：Need to remove href values when printing in Chrome

【发布时间】：2011-11-10 05:55:52

【问题描述】：

我正在尝试自定义打印 CSS，并发现它会打印带有 href 值的链接以及链接。

这是在 Chrome 中。

对于这个 html：

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

打印出来：

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

我希望它打印出来：

Google

【问题讨论】：

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

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

【参考方案1】：

Bootstrap 做同样的事情（...作为下面选择的答案）。

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

只需从那里删除它，或在您自己的打印样式表中覆盖它：

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

【讨论】：

<style>@media printa[href]:aftercontent:none</style> 主要是在我不断返回此页面时为自己发帖，谢谢

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

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

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

@HenrikN - 我认为这与引导列浮动有关。几周前在必要时使用float:none 为我解决了类似的问题；可能会对您有所帮助，但这是一个不同的问题

【参考方案2】：

It doesn't。在你的打印样式表的某个地方，你必须有这段代码：

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

唯一的另一种可能性是你有一个扩展为你做这件事。

【讨论】：

我在 zurb 基础 css 中得到了它。

【参考方案3】：

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

工作完美。

【参考方案4】：

如果你使用下面的 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 浏览器中效果不佳。

【参考方案5】：

我只在我的锚点中遇到了类似的问题：

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

效果很好。

额外提示：inspect print preview

【参考方案6】：

隐藏页面网址。

在样式标签示例中使用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;
   

【讨论】：

如果你想摆脱 URL 在页面上占用的空间，你应该使用display: none !important;。

【参考方案7】：

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

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

那么你在打印预览中就看不到url链接了。

【讨论】：

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