vue-print-nb element 打印element表格不全以及自定义的样式出不来问题（亲测解决）_print打印el-table条纹显示不全

第一部分打印表格

表格上效果：

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

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

步骤三：找到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');
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

步骤四：

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

步骤五：引入自己的print （注意不要引入node_modules的）

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

步骤六：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: '',
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

第二部分打印自定义div

效果图：

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

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

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