Vue前端使用Window.print打印页面，能根据表格数量分页，空白页问题解决（一看就懂）

qq_52753722

已于 2024-03-01 19:29:22 修改

阅读量1.2k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-11-15 10:34:39 首次发布

本文链接：https://blog.csdn.net/qq_52753722/article/details/134414285

版权

/**

先说一下空白页，造成空白页的问题是因为打印页面开始的时候样式中设置了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);


      })


    },