2.vue 使用vue-print-nb打印element表格展

2023-04-11 本文已影响0人静昕妈妈芦培培

问题描述：

image.png

1.寻找问题出现原因

为什么会出现这种情况，打开控制台查看代码

原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1495px肯定与打印纸的宽度不一致所以导致部分区域打印不出来

image.png

2.解决思路那就把col这里的具体宽度设置成百分比就OK了。

2.1首先看能不能从element 着手，但是element 的table有设置Table-column Attributes 的width属性但是是px不是百分百。
2.2既然element不行那就从vue-print-nb 着手，首先我们要清楚print的原理其实就是将我们要打印的id包裹的内容（其实是生成图片）放到一个iframe 然后再打印。那我们就走打印之前修改这些table>colgroup>col 属性的width 。来看看他的钩子回调函数
image.png
github地址：https://github.com/Power-kxLee/vue-print-nb
image.png
image.png
image.png

结果是这些钩子函数的回调都是在插入 iframe后才调用。而我们需要修改的是iframe的样式，去使table表格能打印完全

3.修改源码。

首先我们要写一些样式覆盖原来的table的宽度样式确保宽度不是一个具体的px

3.1.先安装 vue-print-nb插件

npm install vue-print-nb --save

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

image.png

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

3.2
所有的钩子函数都在这里那我们按照他的其他钩子回调的样式添加一个钩子函数（beforeEntryIframe函数），因为我需要在钩子函数里对克隆的dom对象做处理，所以还传了一个参数

image.png

printarea.js文件中会有调用这里的定义的回调函数，我们想在iframe插入内容之前修改，那就要在插入之前执行我们新加的钩子函数。

image.png

3.3.给要打印的区域的容器绑定id,在打印按钮上绑定v-print

image.png

在钩子函数beforeEntryIframe中对ele做处理

export default {
  name: "Report",
  data() {
    return {
      printStatus: true,
      printObj: {
        id: "printArea",
        popTitle: "打印", // 打印配置页上方标题
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style>#printArea {width:100%;}</style>', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        beforeEntryIframe(copy) {
          // copy是ele对象的深度拷贝，修改copy对象不会更改页面中table表格的样式，只会更改打印预览生成的表格的样式
          const cells = copy.querySelectorAll('.cell');
          const tableNode = copy.querySelectorAll('.el-table__header,.el-table__body');
          ;[].slice.call(cells).forEach(item => {
            // 为了让表格中的内容自动换行，不需要的话可以删掉
            item.style.whiteSpace = 'pre-wrap'
          })
          // 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 = ''
              }
            })
          })
        },
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() {
          this.printStatus = false;
        }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: "",
      },
    };
  },
  methods: {
    handlePrint() {
      this.printStatus = true;
    }
  },
};

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

image.png

————————————————
本文参考CSDN博主「Mr.LiLong」的原创文章
原文链接：https://blog.csdn.net/qq_43086723/article/details/127092795
本文参考CSDN博主「梁毅」的原创文章
原文链接：[https://blog.csdn.net/liangyiyiliang/article/details/124451553]

2.vue 使用vue-print-nb打印element表格展

猜你喜欢

热点阅读