vue-print-nb element 打印table时不全的问题

最新推荐文章于 2024-01-24 16:17:58 发布

Kevin_Y4

最新推荐文章于 2024-01-24 16:17:58 发布

阅读量6.2k

点赞数 2

文章标签： javascript html 前端 vue.js

原文链接：https://blog.csdn.net/liangyiyiliang/article/details/124451553

版权

当使用vue-print-nb插件打印Element UI的表格时遇到表格内容缺失的问题，可以通过修改vue-print-nb源码，添加beforeEntryIframe钩子函数来设置表格列宽，确保表格完整打印。具体步骤包括复制源文件、修改print.js和printarea.js、设置全局变量并实现钩子函数，最后调整CSS样式以确保表格宽度100%。

摘要由CSDN通过智能技术生成

先来看看页面上的table

再来看看浏览器打印预览的样子

很明显我的table缺了一大半。

我尝试过设定table的宽度比例等等一系列的方法，包括改用print-js都无法解决我的问题。

最后的解决办法：

我们进入到vue-print-nb包的目录中，把其中的一些文件复制出来（复制出来放哪看框架，我放在是src文件下），主要就是print.js 和printarea.js 文件

在print.js文件下找到newPrint并添加一个钩子函数“beforeEntryIframe()”。

beforeEntryIframe(){
  binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)
},

钩子函数添加好后去到printarea.js 找到 init函数，人家注释写得很清楚写入内容，那我们进入write方法。

进入方法后我们会看到getbody()(相信只是看名字都知道是干嘛的)不要犹豫点进去

我们需要在getbody方法中加上我们刚刚写的钩子函数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的依赖删删掉了，还有要把main.js引用的路径改为你文件复制出来存放的路径，不然访问不到！！！！

然后到你需要打印的页面，在全局变量中去具体实现我们的钩子函数，当中我widthArr数组是我自己定义的每一列的宽度，加起来为100%就好了，也可以自己去获取table的宽度自己算一下，由于我本人是写后端的不太喜欢写js就没弄。



printObj: {
          id: 'printBox',//局部打印的<div> Id
          popTitle: '打印', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeEntryIframe() {
            const widthArr = ['20%', '20%', '20%', '20%', '20%'];
            const tables =         document.getElementById('tablediv7').getElementsByTagName('table'); //获取打印的表格“tablediv7是表格的Id”
            const headcolgroupCol = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col');
            const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col');
            widthArr.forEach((val, index) => {
              headcolgroupCol[index].width = val;
              headcolgroupCol1[index].width = val;
            })
          },
          openCallback() {

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

并先设置好table的宽度比例

#printBox {
     ::v-deep .el-table {
       margin-top: 10px;
       table{
         width: 100%!important;
       }
       .el-table__body,
       .el-table__header {
         width: 100% !important;
       }

       .el-table__body {
         width: 100% !important;
       }


     }

之后调用的时候v-print="printObj" ，引号内直接写我们前面定义的全局变量。

最后来看一下完成的样子。