在Vue 3项目中使用vue3-print-nb插件时遇到表格打印不全的问题,通常可以从以下几个方面进行排查和解决: 检查vue3-print-nb插件版本和文档: 确保你使用的vue3-print-nb版本是最新的,或者至少是一个稳定版本。可以访问其GitHub仓库或官方文档来查看版本信息和更新日志。 仔细阅读官方文档,特别是关于表格打印的部分,...
<el-button v-print="printObj">打印</el-button> // 在数据data中添加 printObj: { id: 'printMe', // 这里是要打印元素的ID popTitle: ' ', // 打印的标题 extraCss: '', // 打印可引入外部的一个 css 文件 extraHead: '', // 打印头部文字 preview: false, // 是否启动预览模式,默认是f...
使用vue-print-nb打印，当数据很多时，打印预览显示不全。原因：首先，为了使打印按钮始终固定显示在页面上部，对id=”print”所在的div的高度进行了计算，使其正好布满剩余屏幕高度。v-html引用的datas是从后端请求来的，由于数据很多，超出了一屏，且其父容器id=”print”设置了：overflow-y: auto;，使id=”pri...
步骤三:找到printarea.js的getFormData函数在 return copy 上面添加以下代码 // copy是ele对象的深度拷贝,修改copy对象不会更改页面中table表格的样式,只会更改打印预览生成的表格的样式 const cells = copy.querySelectorAll('.cell'); const tableNode = copy.querySelectorAll('.el-table__header,.el-table__...
使用vue-print-nb 打印table,数据是后端接口返回的动态数据,当时数据很多时,打印预览的表格还是只有一页,如下图:数据太多,中间省略未截图。打印预览如下,只有一页: 代码:(这里的table代码示例与我另一篇文章中的是一样的,此处不再详细贴了,大家点过去看吧:table) 序号 姓名 学号 性别 班级 {{it}} ...
打印效果图: 解决方法2:使用print-js,结合html2canvas,实现打印: 需要注意的是,如果table存在滚动条,就会打印不全了,调整好列宽即可,打印效果图如下 附上全部代码: 1<template>23<el-card shadow="never" >4<el-button v-print="printObj">nb打印</el-button>5<el-button @click="onPrint">printJs打印...
首先，安装vue-print-nb，确保其功能得到充分利用。在项目的main.js文件中，引入vue-print-nb。使用vue-print-nb的API解决打印时的样式问题，通过修改CSS。对于打印不全的问题，需要通过修改源码来解决，可直接将相关文件复制到项目中的assets目录下。任意选择一个文件放入。将上述文件放置到assets目录，...
打印 1 2 3 4 5 6 7 8 9 4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。 5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。(还有一种情况缩放也不行,下面说) 1 第二种方法:手动下载插件到本地 插件地址:https...
2.1首先看能不能从element 着手,但是element 的table有设置Table-column Attributes 的width属性 但是是px不是百分百。2.2既然element不行 那就从vue-print-nb 着手,首先 我们要清楚print的原理其实就是将我们要打印的id包裹的内容(其实是生成图片)放到一个iframe 然后再打印...