<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="./plugin/vue.js"></script>
<!-- 引入組件庫 -->
<script src="./plugin/element.js"></script>
<script src="./plugin/en.js"></script>
<script src="./plugin/axios.min.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.print {
padding: 40px;
}
table {
width: 100%;
margin: 20px;
}
td {
padding: 5px 10px;
}
.order,
.number {
padding: 10px 20px;
}
button {
padding-left: 40px;
width: 120px;
height: 60px;
}
</style>
<body>
<div id="app">
<button @click="printButton">Print</button>
<div class="print">
<table border cellpadding="0" cellspacing="0" v-for="(item,index) in 100" style="height: 240px; width: 95%" :style="{'page-break-after': (index+1)%5===0&&'always'}">
<tr>
<td rowspan="5" class="order">500</td>
<td rowspan="5" class="number">A34535</td>
<td>資產(chǎn)名稱:</td>
<td>研磨夾具</td>
<td>規(guī)格型號(hào):</td>
<td>ST/PC</td>
</tr>
<tr>
<td>制造商:</td>
<td></td>
<td>入賬日期::</td>
<td>ST/PC</td>
</tr>
<tr>
<td>供應(yīng)商:</td>
<td></td>
<td>歸屬建設(shè)項(xiàng)目:</td>
<td></td>
</tr>
<tr>
<td>資產(chǎn)地點(diǎn):</td>
<td>ST/PC</td>
<td>使用部門:</td>
<td></td>
</tr>
<tr>
<td>管理人:</td>
<td>ST/PC</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<script>
window.onload = function () {
new Vue({
el: '#app',
data: function () {
return {}
},
created() {},
mounted() {},
methods: {
printButton() {
var body = document.body.innerHTML
document.body.innerHTML = document.querySelector('.print').innerHTML
window.print()
window.close()
document.body.innerHTML = body
location.reload()
}
}
})
}
</script>
</body>
</html>
注意點(diǎn): 打印的樣式只能寫在行內(nèi)才能生效摩幔。分頁樣式是 page-break-after：always 角塑。
動(dòng)態(tài)添加這個(gè)樣式伯复。就能實(shí)現(xiàn)一頁放幾個(gè)
