vue-print-nb使用和解决打印element表格不全问题

奋斗喵

已于 2023-03-13 14:41:17 修改

阅读量5.2k

点赞数 8

文章标签： vue.js javascript 前端

于 2023-03-13 11:42:43 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41329287/article/details/129488628

版权

vue-print-nb使用

安装 vue-print-nb

npm install vue-print-nb --save

在main.js中引入

// main.js
import Print from 'vue-print-nb'
Vue.use(Print)

使用 vue-print-nb

// 打印按钮绑定 printObj
<el-button v-print="printObj">打印</el-button>

// 在数据data中添加
printObj: {
  id: 'print',
  popTitle: '', // 打印配置页上方标题
  extraCss: '', // 打印可引入外部的一个 css 文件
  ... ... // 其他配置项或钩子函数可参考官方 https://www.npmjs.com/package/vue-print-nb
},

// 被打印的容器
<div id="print">这块内容将会被打印</div>

解决打印element表格不全问题

因为需要修改源码，所以直接拷贝以下文件，放到项目的assets目录下（将node_modules/vue-print-nb/print文件拷贝至项目中，不一定要assets目录，想放哪放哪，下面在main.js中引入的时候填写对应路径即可）
在main.js中引入（之前在main.js中引入的vue-print-nb可以去掉了）

// main.js
import Print from './assets/print'
Vue.use(Print)

在assets目录中的print文件夹下找到print.js修改代码，添加beforeEntryIframe钩子

// print.js
new Print({
   ids: id, // * 局部打印必传入id
   vue,
   url: binding.value.url, // 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高
   standard: '', // 文档类型，默认是html5，可选 html5，loose，strict
   extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
   extraCss: binding.value.extraCss, // 额外的css连接，多个逗号分开
   previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
   zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
   previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印预览的标题
   popTitle: binding.value.popTitle, // title的标题
   preview: binding.value.preview || false, // 是否启动预览模式
   asyncUrl: binding.value.asyncUrl,
   
   // ----------------添加下方代码  beforeEntryIframe-----------------------
   beforeEntryIframe(){
     binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)
   },
   // ----------------------------------------------------------------------
   
   
   previewBeforeOpenCallback () { // 预览窗口打开之前的callback
     binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
   },
   previewOpenCallback () { // 预览窗口打开之后的callback
     binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
   },
   openCallback () { // 调用打印之后的回调事件
     binding.value.openCallback && binding.value.openCallback(vue)
   },
   closeCallback () {
     binding.value.closeCallback && binding.value.closeCallback(vue)
   },
   beforeOpenCallback () {
     binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)
   }
 });

在assets目录中的print文件夹下找到printarea.js修改代码，添加一行代码以触发上方的beforeEntryIframe函数

// printarea.js
// 找到 getBody 添加一行代码 this.settings.beforeEntryIframe();
getBody () {
  let ids = this.settings.ids;
  ids = ids.replace(new RegExp("#", "g"), '');
  
  // ------------添加的这一行-----------------
  this.settings.beforeEntryIframe();
  // ----------------------------------------
  
  this.elsdom = this.beforeHanler(document.getElementById(ids));
  let ele = this.getFormData(this.elsdom);
  let htm = ele.outerHTML;
  return '<body>' + htm + '</body>';
}

在使用vue-print-nb的页面中修改printObj对象（上面的vue-print-nb使用步骤3）

// 在数据data中添加
printObj: {
  id: 'print',
  popTitle: '', // 打印配置页上方标题
  extraCss: '', // 打印可引入外部的一个 css 文件
  // ... ... // 其他配置项或钩子函数可参考官方 https://www.npmjs.com/package/vue-print-nb

  // ------------------------添加下面代码---------------------------
  beforeEntryIframe () {
    const cells = document.querySelectorAll('.cell')
    const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
    // el-table 打印不全的问题
    for (let j = 0; j < tableNode.length; j++) {
      const tableItem = tableNode[j]
      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 i = 0; i < cells.length; i++) {
      const cell = cells[i]
      cell.style.width = '100%'
      cell.removeAttribute('style')
    }
  }
},