在vue中使用printJS进行多页打印
print.vue
<template>
<div>
<Button type="primary" @click="printHtmlCss">打印</Button>
<div id="printBox">
<div style="page-break-after:always;">
<table contenteditable="true" class="tableBox" style="width:100%">
<caption>千佛山医院汇总表</caption>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>千佛山医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
</table>
</div>
<div style="page-break-after:always;">
<table contenteditable="true" class="tableBox" style="width:100%">
<caption>齐鲁医院汇总表</caption>
<tr height="40">
<td width="25%">名称</td>
<td width="25%">齐鲁医院</td>
<td width="25%">所属网格</td>
<td width="25%">第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
<tr height="40">
<td>名称</td>
<td>齐鲁医院</td>
<td>所属网格</td>
<td>第五网格</td>
</tr>
<tr height="40">
<td>网格长</td>
<td>刘*</td>
<td>联系方式</td>
<td>155****3332</td>
</tr>
<tr height="40">
<td>网格员</td>
<td>张*民</td>
<td>联系方式</td>
<td>135****8360</td>
</tr>
</table>
</div>
<div style="page-break-after:always;">
<div style='height:30px;width:100%'></div>
</div>
<div style="page-break-after:always;" contenteditable="true" >
<img src="./../../assets/images/talkingdata.png" alt="" width='100%' height='400px'>
</div>
</div>
</div>
</template>
<script>
import printJS from "print-js";
import css from "./printCss.js";
export default {
name: "maps",
methods: {
printHtmlCss() {
const style = css; //直接写样式
printJS({
printable: "printBox",
type: "html",
style,
// css: [
// "./map.css"
// ], //引入css文件
scanStyles: false
});
}
}
};
</script>
<style lang="less" scoped>
.tableBox {
border-collapse: collapse;
margin-bottom: 20px;
caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
td {
border: 1px solid #333;
width: 120px;
text-align: center;
}
}
</style>
在printCss.js这里面进行样式的设置，试过其他的方式，样式不生效
let css=
`@media print{
#printBox{
width: 100%;
margin: 0 auto;
}
.tableBox {border-collapse: collapse;width:100%;}
caption{
font-size:18px;
font-weight:bold;
margin-bottom:20px
}
.tableBox tr{width:100%}
.tableBox td {
border: 1px solid #333;
width: 25%;
text-align: center;
whitespace:wrap
}
}`
export default css;
