vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)

第一部分打印表格

表格上效果:
vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第1张图片
vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第2张图片

步骤一:先安装vue-print-nb依赖,找到node_modules里的print复制一份出来

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第3张图片

步骤二:把print放到自己想放的地方

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第4张图片

步骤三:找到printarea.js的getFormData函数在 return copy 上面添加以下代码

  // copy是ele对象的深度拷贝,修改copy对象不会更改页面中table表格的样式,只会更改打印预览生成的表格的样式
    const cells = copy.querySelectorAll('.cell');
    const tableNode = copy.querySelectorAll('.el-table__header,.el-table__body');
    // el-table打印不全的问题
    ;[].slice.call(tableNode).forEach(item => {
      item.style.width = '100%';
      const child = item.childNodes;
      ;[].slice.call(child).forEach(element => {
        if(element.localName === 'colgroup') {
          element.innerHTML = ''
        }
      })
    })

    // el-table各自里面打印超过格子问题
    ;[].slice.call(cells).forEach(element => {
      element.style.width = '100%';
      element.removeAttribute('style');
    })

步骤四:

<el-button size="medium" v-print="print">Dayin</el-button>

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第5张图片

步骤五:引入自己的print (注意不要引入node_modules的)

import print from '@/libs/print';
Vue.use(print);

步骤六:data里加入

print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
        previewTitle: '', // 打印预览的标题(开启预览模式后出现),
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
        zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
        previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
        beforeEntryIframe() {
          const cells = document.querySelectorAll('.cell')
          ;[].slice.call(cells).forEach(item => {
            // 为了让表格中的内容自动换行,不需要的话可以删掉
            item.style.whiteSpace = 'pre-wrap'
          })
        },
        openCallback() {

        }, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
        url: '',
        standard: '',
        extraCss: '',
      },

就这么多~~~~,看了好多博主写的都没用,这个确实有用的。

第二部分打印自定义div

效果图:
vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第6张图片

步骤和打印表格基本一致写上id

在这里插入图片描述

data里面的 print也只需要对应id就行

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第7张图片

重点是自定义的样式(必须需要加@media print),#printArea是id,后面必须加穿透/deep/,在后面才是自定义的样式

vue-print-nb element 打印element表格不全以及自定义的样式出不来问题(亲测解决)_第8张图片

你可能感兴趣的:(工作遇到的问题,vue.js,javascript,前端)