vue 使用vue-print-nb打印element表格展示不全

在这里插入图片描述

在这里插入图片描述
预览窗口有的列没有展示全

先安装 vue-print-nb

npm install vue-print-nb --save

因为要改源码,所以在依赖里找到这个文件,单独拿出来,然后再main.js引用一下

在这里插入图片描述
在这里插入图片描述
点击打印的时候 使用 v-print

<i v-print="printObj"  class="el-icon-printer print-icon no-print" />

给在data中的 printObj 添加内容

	printObj: {
          id: 'printTest',
          popTitle: ' ', // 打印的标题
          extraCss: ' ', // 打印可引入外部的一个 css 文件
          beforeEntryIframe () {
            const cells = document.querySelectorAll('.cell')
            for (let k7 = 0; k7 < cells.length; k7++) {
              const cell = cells[k7]
              // 在这里添加样式只是修改了打印的样式,不会污染原页面的样式
              // 为了让表格中的内容自动换行,不需要的话可以删掉
              cell.style.whiteSpace = 'pre-wrap' 
  
            }
          }
        }

找到printarea.js,找到getFormData函数,在尾部添加以下内容

const cells = document.querySelectorAll('.cell')
    const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
    // el-table 打印不全的问题
    for (let k6 = 0; k6 < tableNode.length; k6++) {
      const tableItem = tableNode[k6]
      tableItem.style.width = '100%'
      const child = tableItem.childNodes
      for (let i = 0; i < child.length; i++) {
        const element = child[i]
        if (element.localName === 'colgroup') {
          element.innerHTML = ''
        }
      }
    }
    // el-table 格子里面打印超过格子的问题
    for (let k7 = 0; k7 < cells.length; k7++) {
      const cell = cells[k7]
      cell.style.width = '100%'
      cell.removeAttribute('style')
    }

至此js文件修改完毕,点击打印按钮发现已经可以展示全,而且还可以换行展示

在这里插入图片描述

还有个问题就是点击打印的时候第一次没变化,在第二次的时候可以展示全,有思路的小伙伴欢迎在评论区留言哦

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值