vue自定义打印

最新推荐文章于 2025-04-11 15:47:45 发布

码农小权权

最新推荐文章于 2025-04-11 15:47:45 发布

阅读量604

点赞数

本文链接：https://blog.youkuaiyun.com/qq_40280730/article/details/115658239

版权

本文介绍了一种使用Vue.js和CSS来实现页面分页打印的方法。通过设置`page-break-after: always;`属性，动态地根据班级数量在每个学校之间插入分页符，确保每个学校的打印内容独立于其他学校。代码示例展示了如何根据班级数量大于或小于45调整分页数量，以及如何根据学校名称长度调整字体大小。同时，提供了一个名为`print`的打印方法，用于处理打印逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义打印区域：
利用***page-break-after:always;***进行分页

    <div ref="print" v-if="isShowMask">
      <!-- 打印多个学校 -->
      <div  v-for="(item,index) in printSchoolList" :key="index" v-if="!isSingle">
        <!-- 班级数量大于45 -->
        <div style="page-break-after:always;width:1000px;height:600px;" v-for="(item2,index2) in [1,2,3,4]" v-if="item.scanCount > 60">
          <div  class="school-title">
            <span style="display: block;margin-left:150px;">学</span>
            <span style="display: block;margin-right:150px;">校</span>
          </div>
          <div class="print-font" style="" :class="item.schoolName.length > 5 ? (item.schoolName.length > 10 ? 'font102': 'font100') : (item.schoolName.length == 5 ? 'font101': '')">
            {{item.schoolName}}
          </div>
        </div>
        <!-- 班级数量小于等于45 -->
        <div style="page-break-after:always;width:1000px;height:600px;" v-for="(item2,index2) in [1,2]" v-if="item.scanCount <= 60">
          <div  class="school-title">
            <span style="display: block;margin-left:150px;">学</span>
            <span style="display: block;margin-right:150px;">校</span>
          </div>
          <div class="print-font" style="" :class="item.schoolName.length > 5 ? (item.schoolName.length > 10 ? 'font102': 'font100') : (item.schoolName.length == 5 ? 'font101': '')">
            {{item.schoolName}}
          </div>
        </div>
      </div>
      <!-- 打印单个学校 -->
      <!-- 班级数量大于45 -->
      <div style="page-break-after:always;width:1000px;height:600px;" v-if="isSingle&&printItem.scanCount > 60" v-for="(item2,index2) in [1,2,3,4]">
        <div  class="school-title">
          <span style="display: block;margin-left:150px;">学</span>
          <span style="display: block;margin-right:150px;">校</span>
        </div>
        <div class="print-font" :class="printItem.schoolName.length > 5 ? (printItem.schoolName.length > 10 ? 'font102': 'font100') : (printItem.schoolName.length == 5 ? 'font101': '')">
          {{printItem.schoolName}}
        </div>
      </div>
      <!-- 班级数量小于等于45 -->
      <div style="page-break-after:always;width:1000px;height:600px;" v-if="isSingle&&printItem.scanCount <= 60" v-for="(item2,index2) in [1,2]">
        <div  class="school-title">
          <span style="display: block;margin-left:150px;">学</span>
          <span style="display: block;margin-right:150px;">校</span>
        </div>
        <div class="print-font" :class="printItem.schoolName.length > 5 ? (printItem.schoolName.length > 10 ? 'font102': 'font100') : (printItem.schoolName.length == 5 ? 'font101': '')">
          {{printItem.schoolName}}
        </div>
      </div>
    </div>

打印方法：

    print(item,flag){
      this.isSingle = flag
      if (!flag) {
        this.printSchoolList = item.paperOrderList
      }else {
        this.printItem = item
      }
      this.isShowMask = true
      var body = window.document.body.innerHTML; 
      // console.log(body)
      this.$nextTick(() => {
        window.document.body.innerHTML = this.$refs.print.innerHTML
        let timer = setTimeout(() => {
          window.print();        
          window.document.body.innerHTML = body;
          this.isShowMask = false
          location.reload();
          clearTimeout(timer)
        },500)
        })
     },