/**
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
*/
先说一下空白页，造成空白页的问题是因为打印页面开始的时候样式中设置了margin-top或者样式中包含margin-top属性，所以导致多出一页空白。
最后展示页面代码：
<!-- 根据id="printNN"去渲染打印页面 --> <div id="printNN" :key="key" style="height:600px;position:absolute;top:10000px;width:1100px;font-family:Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;color:black;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-weight: bold;"><!-- 表格上方写入其他样式开始位置 totalPage:总页数，tableData总数据，totalSize：每页大小 表格中的materialName太长不会分行，设置white-space进行分行 --> <div v-for="(n, index) in totalPage " :key="index" style="page-break-before:always;width:1100px;"> <el-table :data="tableData.slice(index * totalSize, ((totalTable - ((index + 1) * totalSize)) > 0 ? (index + 1) * totalSize : totalTable))"> <el-table-column label="序号" align="center" prop="index" width="60" /> <el-table-column label="名称" align="center" prop="materialName"> <template slot-scope="scope"><span v-html="scope.row.materialName" style="width: 100%; white-space: pre-wrap !important"></span></template> </el-table-column> <el-table-column label="单位" align="center" prop="unit" width="100" /> <el-table-column label="单价" align="center" prop="price" width="110" /> <el-table-column label="出库数量" align="center" prop="outQty" width="100" /> <el-table-column label="总价" align="center" prop="cost" width="150" /> <!-- <el-table-column label="备注" align="center" prop="remark" /> --> </el-table> <br /> </div><!-- 表格下方写入其他样式开始位置 --> </div>js代码
printpage () { //发送请求 Promise.all([]).then(_res => { //数据处理完成后(该处要设置tableData，totalTable，totalPage) 下面开始做打印 // printNN与上面的id= printNN对应 setTimeout(() => { document.body.innerHTML = document.getElementById("printNN").innerHTML; /* 改变页面内容 */ window.print(); document.body.innerHTML = ""; location.reload(); /* 重新载入文档，复原页面内容 */ }, 500); }) },