vue2 vue-print-nb使用，以及使用vue-print-nb打印会多一张空白页问题解决

html

html 复制代码

    <button v-show="false" ref="printBtn" v-print="printBill">
      Print local range
    </button>

    <div id="printBill">
      <div
        v-for="(page, index) in printList"
        :key="index"
        style="page-break-after: always; border: 1px solid transparent"
      >
        <p v-if="index === 0" class="printBill-title">
          当前打印共{{ accountList.length }}条记录
        </p>
        <div v-for="item in page" :key="item.id" class="print-info">
          <p class="info-title">
            直系亲属可访问"服刑人员信息查询系统"（https://gdjyj.gd.gov.cn/fxrycx_pc/login），并在登录页面上输入查询账号及查询密码，即可查询到服刑人员在狱内的教育改造情况。
          </p>
          <div class="info-table">
            <div class="info-table-item">
              <div class="item-top">姓名</div>
              <div class="item-bottom">{{ item.name }}</div>
            </div>
            <div class="info-table-item">
              <div class="item-top">监区</div>
              <div class="item-bottom">{{ item.prisonRoom }}</div>
            </div>
            <div class="info-table-item">
              <div class="item-top">查询账号</div>
              <div class="item-bottom">{{ item.account }}</div>
            </div>
            <div class="info-table-item">
              <div class="item-top">密码修改</div>
              <div class="item-bottom">{{ item.password }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

javascript 复制代码

  export default {
    name: 'Offender',
    components: {},
    data() {
        // 打印配置
        printBill: {
          id: 'printBill',
          popTitle: '你好啊', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          clickMounted() {},
          previewBeforeOpenCallback(vue) {
            //预览窗口打开之前的callback（开启预览模式调用）
            console.log('正在加载预览窗口')
          },
          previewOpenCallback(vue) {
            // 预览窗口打开之后的callback（开启预览模式调用）
            console.log('已经加载完预览窗口')
          },
          beforeOpenCallback(vue) {
            console.log('打开之前')
          },
          openCallback(vue) {
            console.log('执行了打印')
          },
          closeCallback() {
            this.printList = []
            that.closeCallbackHandle()
            // console.log('关闭打印')
            // that.updateStatusHandle()
            // that.printList = []
            // that.accountList = []
            // if (that.dialogVisiblePrint) {
            //   that.printClose()
            // }
          }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        },
      }
    },
    created() {},
    methods: {
      printListDivision(list) {
        // let list = [1,2,3,4,5,6,7,8,9,10,11]
        let step = 8
        let arr = []
        for (let i = 0; i < list.length; i += step) {
          if (i + step <= list.length) {
            arr.push(list.slice(i, i + step))
          } else {
            arr.push(list.slice(i))
          }
        }
        console.log(arr)
        return arr
      },
      async handlePrint(id) {
        const { value } = await printAccount({
          ids: id,
        })
        if (!value.length) {
          this.$message.warning('暂无数据打印')
          return
        }
        this.accountList = value
        this.printList = this.printListDivision(value)
        this.$refs.printBtn.click()
      },
    },
  }

使用vue-print-nb打印会多一张空白页问题解决

div上加上样式border: 1px solid transparent

css 复制代码

border: 1px solid transparent