<!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>资产名称:</td>
<td>研磨夹具</td>
<td>规格型号:</td>
<td>ST/PC</td>
</tr>
<tr>
<td>制造商:</td>
<td></td>
<td>入账日期::</td>
<td>ST/PC</td>
</tr>
<tr>
<td>供应商:</td>
<td></td>
<td>归属建设项目:</td>
<td></td>
</tr>
<tr>
<td>资产地点:</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>
注意点: 打印的样式只能写在行内才能生效。分页样式是 page-break-after：always 。
动态添加这个样式。就能实现一页放几个
