Question

当我们尝试打印某些页面时，按钮后面跟着括号中链接的href。我们希望页面在屏幕上显示时打印。

这是html

<div>
   <a id="manage-debt-type-btn" class="btn btn-primary" href="Updatype?typeId=98765">
    Update Types
    </a>
</div>

打印输出中显示的是带有

的按钮

更新类型Updatetype？typeId = 98765

我尝试添加@media printer { btn-primary...}，但没有做任何事。

Answer 1

这是未经测试的，但您可以尝试

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

Answer 2

来自_print.scss媒体查询中的Bootstrap @media print {文件：

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

// Don't show links for images, or javascript/internal links
a[href^="javascript:"]:after,
a[href^="#"]:after {
  content: "";
}

这些默认规则可以由CSS修改。以他们的预防链接为例：

a[href]:after {
  content: "";
}

或定位我们压制的链接：

a[href].clean-print:after {
  content: "";
}

结合：

<a id="manage-debt-type-btn" class="btn btn-primary clean-print" href="Updatype?typeId=98765">
Update Types
</a>

禁止默认的Bootstrap样式以打印某些链接

2 个答案: