打印预览中未显示文本
Posted
技术标签:
【中文标题】打印预览中未显示文本【英文标题】：Text not showing in print preview 【发布时间】：2020-03-07 17:36:08 【问题描述】：我会尝试打印我的网页，但在打印预览中，它没有显示任何文字
尝试添加媒体打印样式，但仍然没有
我的 html 代码
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body, h1, h2, h3, h4, h5, h6
font-family: 'Bree Serif', serif;
</style>
<style type="text/css">
@media print and (color)
body
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nota</title>
<link rel="stylesheet" href="bootstrap2.css">
</head>
<body onload="window.print()">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1>
<a href="https://riyadhaqiqah.com/">
<img src="riyadh.png">
</a>
</h1>
</div>
<div class="col-xs-6 text-right">
<h1>INVOICE</h1>
<h1><small>NOTA : PBSAN1908381</small></h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div class="panel panel-default">
<div class="panel-heading">
<h4>From: <a href="#">Riyadh Aqiqah</a></h4>
</div>
<div class="panel-body">
<p>
Komplek, Jl. Mawar Raya Jl. Raya Harapan Kita No.27A<br>
Bencongan, Kec. Karawaci <br>
Tangerang, Banten 15810 <br>
0821-5199-9910 <br>
</p>
</div>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 text-right">
<div class="panel panel-default">
<div class="panel-heading">
<h4>To : <a href="#"> Agus Mina</a></h4>
</div>
<div class="panel-body">
<p>
Kp. Kudang Rt/Rw 04/09, <br>
Ds. Cibiru Wetang Kec. Cileunyi - Bandung (Warung Amel, sebelah isi ulang air Novita) <br>
<a href="">0852-1342-6441</a> <br>
</p>
</div>
</div>
</div>
</div> <!-- / end client details section -->
<table class="table table-bordered">
<thead>
<tr>
<th><h4>NO</h4></th>
<th><h4>URAIAN</h4></th>
<th><h4>HARGA SATUAN</h4></th>
<th><h4>QTY</h4></th>
<th><h4>JUMLAH</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tipe A Betina + Masak</td>
<td class="text-right"><span style="float: left;">Rp </span>1,100,000</td>
<td class="text-right">1</td>
<td class="text-right"><span style="float: left;">Rp </span>1,100,000</td>
</tr>
</tbody>
</table>
<div class="row text-right">
<div class="col-xs-2 col-xs-offset-8">
<p>
<strong>
Diskon : <br>
Uang Muka : <br>
Kekurangan : <br>
Total : <br>
</strong>
</p>
</div>
<div class="col-xs-2">
<strong>
<span style="float: left;">Rp </span>0 <br>
<span style="float: left;">Rp </span>1,650,000 <br>
<span style="float: left;">Rp </span>0 <br>
<span style="float: left;">Rp </span>1,650,000 <br>
</strong>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div class="panel panel-info">
<div class="panel-heading">
<h4>Paypal details</h4>
</div>
<div class="panel-body">
<p>tahirtaous@live.com</p>
<!-- <p>Bank Name</p>
<p>SWIFT : --------</p>
<p>Account Number : --------</p>
<p>IBAN : --------</p> -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>这是我的小提琴，小提琴出现的文字很奇怪。 如果有人可以解释并帮助我。 我真的不知道为什么会这样。
https://jsfiddle.net/anggi404/2L4pcsa7/1/
【问题讨论】：
我试过你的 jsfiddle，打印预览效果很好 这很奇怪，小提琴打印预览效果很好。但在我的本地项目中，它没有显示任何文本。 它适用于我：Mac/Firefox/打印到 PDF。我想知道是浏览器问题还是打印驱动问题。 是的，我猜是浏览器问题，因为尝试使用 firefox 可以正常工作。谢谢大家回答我的问题:) 工作正常可能是你的浏览器没有更新.. 【参考方案1】：注意到这是一个老问题，但它可能会对那里的人有所帮助。 这可能与您自定义加载的字体有关。
如果打印的字体不太重要，请尝试添加类似的内容。
在下面的示例中，我只针对身体，但当然可以随意更改它。
@media print
body
font-family: Arial, Helvetica, sans-serif;
当然有一种方法可以在打印中加载自定义字体，但这可能会帮助某人继续前进。
祝你好运！
【讨论】：
以上是关于打印预览中未显示文本的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 打印预览不加载 @media only print font-face