Bootstrap3でHTMLを印刷用CSSを設定する方法

Bootstrap3でHTMLを印刷用CSSを設定する方法

1.印刷時にだけ適用されるCSSを設定する

・link media="print"で読み込む

印刷用のcssを作成して、linkタグで読み込みする

<link rel="stylesheet" type="text/css" media="print" href="print.css">

・@media printで指定する

@media print{
  /* 印刷用CSSの定義を指定する */
}

2.cssを指定する

Bootstrapはbootstrap.css(あるいはbootstrap.min.css)に@media print指定で独自の指定がされているため。印刷するときに、レイアウトが崩れたり、思うように背景が印刷されなっ語りします。

・input入力欄が横長くなる

を印刷する際に、displayがblockになっり、widthが100%になるため、inputが横長くなります。
対策:

.form-control {
	display:inline !important;
	width:auto !important;
}

・テーブルなどの背景が印刷されない

Bootstrapがテーブルタグを強制的に文字は黒・背景は白に設定してた。

.table td, .table th {
	background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
	border: 1px solid #ddd !important;
}

対策:

body{
	-webkit-print-color-adjust:exact;
}
table tr.bg-success > td {
	background-color: #dff0d8 !important;
}

・aタグの印刷時に表示されるURLを消す方法

原因:

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

対策:

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

 abbr[title]:after {
 content: "" !important;
 }

BootstrapでHTMLテーブルの背景色を印刷します
印刷時に表示されるURLを消す方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注