问题描述：
1.寻找问题出现原因
为什么会出现这种情况，打开控制台查看代码
原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度 通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1495px肯定与打印纸的宽度不一致 所以导致部分区域打印不出来
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引用一下
#main.js
import Print from './assets/print'
Vue.use(Print);
3.2
所有的钩子函数都在这里 那我们按照他的其他钩子回调的样式 添加一个钩子函数（beforeEntryIframe函数），因为我需要在钩子函数里对克隆的dom对象做处理，所以还传了一个参数
printarea.js文件中会有调用这里的定义的回调函数，我们想在iframe插入内容之前修改，那就要在插入之前执行我们新加的钩子函数。
3.3.给要打印的区域的容器绑定id,在打印按钮上绑定v-print
在钩子函数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文件修改完毕，点击打印按钮发现已经可以展示全，而且还可以换行展示
————————————————
本文参考CSDN博主「Mr.LiLong」的原创文章
原文链接：https://blog.csdn.net/qq_43086723/article/details/127092795
本文参考CSDN博主「梁毅」的原创文章
原文链接：[https://blog.csdn.net/liangyiyiliang/article/details/124451553]
