呼叫印表機列印案例
頁面涉及到列印功能可以參考該例子
涉及的頁面不是很美觀，如果vue+elementUI，可美化頁面，或者其他框架都可使用，更好的也可以自定製。
直接上程式碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#form_print{
text-align: center;
}
.container{
display: inline-block;
}
h3{
margin-bottom: 30px;
}
table{
margin: 10px 0 30px;
border-collapse: collapse;
}
thead{
font-size: 14px;
}
tbody{
font-size: 12px;
}
th, td{
max-width: 90px;
min-width:70px;
padding:5px;
}
td{
word-wrap: break-word;
}
.text{
display: flex;
padding: 0 20px;
}
.left,
.right{
flex: 1;
}
.text .right{
margin-left: 40px;
}
label{
text-align: left;
display: block;
margin-bottom: 10px;
}
.footer{
display: flex;
}
.footer label{
text-align: center;
}
</style>
<style>
這裡很關鍵：這裡是設定列印頁面的大小的樣式
@page{size: auto;
margin: 3mm;
}
@media print{
body{
text-align: center;
}
}
</style>
</head>
<body>
<div id="form_print">
<div class="container">
<h3>物料出庫成本核算表</h3>
<div class="text">
<div class="left">
<label>
供應商：<span>海康</span>
</label>
<label>
使用部門：<span>深圳辦事處</span>
</label>
<label>
使用專案：<span>中海物業-深圳-電梯維保-2018</span>
</label>
</div>
<div class="right">
<label>
出庫核算表號：<span>RK-20180413-02923海康</span>
</label>
<label>
製表日期：<span>2018-04-13</span>
</label>
</div>
</div>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>序號</th>
<th>物料名稱</th>
<th>規格型號</th>
<th>品牌</th>
<th>採購單價</th>
<th>數量</th>
<th>單個成本</th>
<th>單個可抵扣稅金</th>
<th>合計</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>網路紅外槍球攝像機</td>
<td>DS-2CD2T26VD-I5(6mm)</td>
<td>海康</td>
<td>350.0</td>
<td>1.00</td>
<td>299.15</td>
<td>50.85</td>
<td>299.15</td>
</tr>
<tr>
<td>2</td>
<td>網路紅外槍球攝像機</td>
<td>DS-2CD2T26VD-I5(4mm)</td>
<td>海康</td>
<td>350.0</td>
<td>1.00</td>
<td>299.15</td>
<td>50.85</td>
<td>299.15</td>
</tr>
<tr>
<td>3</td>
<td>電源介面卡</td>
<td>DS-2FA1220-DW-CH</td>
<td>海康</td>
<td>25.00</td>
<td>2.00</td>
<td>21.37</td>
<td>3.63</td>
<td>42.74</td>
</tr>
<tr>
<td colspan="8">合計:</td>
<td>10000</td>
</tr>
</tbody>
</table>
<div class="footer">
<div class="left">
<label>製表：
<span>林林林</span>
</label>
</div>
<div class="right">
<label>稽核：
<span>林林林</span>
</label>
</div>
</div>
</div>
</div>
<button id="btn">列印</button>
</body>
</html>
列印的JS程式碼
<script type="text/javascript" >var btn = document.getElementById('btn')
btn.onclick = function print() {
var form_print = document.getElementById('form_print')
var newStr = form_print.innerHTML
var oldStr = document.body.innerHTML
document.body.innerHTML = newStr
window.print()
window.location.reload()
document.body.innerHTML = oldStr
return false
}
</script>