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>

js

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
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架