为什么通过jquery/javascript打印时引导CSS不可见
我已经创建了一个使用引导的页面,当我使用类似的函数时,它不包括在打印视图中为什么通过jquery/javascript打印时引导CSS不可见,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我已经创建了一个使用引导的页面,当我使用类似的函数时,它不包括在打印视图中 window.print(); 我给了你一张图片来帮助你理解我的问题。我尝试导入相同的引导css文件,并将其作为print <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="print"> 但这并不能解决问题。是否有任何有效的解决方案将其
window.print();
我给了你一张图片来帮助你理解我的问题。我尝试导入相同的引导css文件,并将其作为print
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="print">
但这并不能解决问题。是否有任何有效的解决方案将其打印为原始文件的外观。Bootstrap有自己的@media print部分 引导程序3.3.7(): 你可以
引导CSS可用于媒体查询…有媒体屏幕和打印,因此,即使您从链接强制打印,标有屏幕的也无法工作。打印pdfI复制的进度条CSS中无法看到这些条,并将其放入@media print{},但仍然没有显示!背景色:#337ab7!重要的-webkit打印颜色调整:精确;谢谢你的关注Alex,你能为进度条写一个snipplet吗?请尝试以下内容:@media print{.progress bar{background color:#337ab7!重要;-webkit print color adjust:exact;}}在bootstrap.css或更高版本之前导入的自定义css文件?请确保在自定义css之前导入bootstrap.css
@media print {
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
@media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table !important;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
}
@media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
@media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
@media print {
.hidden-print {
display: none !important;
}
}