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

css CSS

小胖猪猪

2020-03-23

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

这是在Chrome中。

对于此HTML:

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

它打印:

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

我希望它打印:

Google

第3066篇《在Chrome中打印时需要删除href值》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
番长樱梅 2020.03.23

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

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

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

Tony小卤蛋 2020.03.23

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

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

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

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

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

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

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

樱猿 2020.03.23

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

工作完美。

米亚 2020.03.23

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

如果您使用以下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浏览器中无法正常运行。

樱小胖Mandy 2020.03.23

我只在锚中嵌套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;
   }
}

效果很好。

提示检查打印预览

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android