vue 使用vue-print-nb打印element表格展示不全
预览窗口有的列没有展示全
先安装 vue-print-nb
npm install vue-print-nb --save
因为要改源码,所以在依赖里找到这个文件,单独拿出来,然后再main.js引用一下
点击打印的时候 使用 v-print
<i v-print="printObj" class="el-icon-printer print-icon no-print" />
给在data中的 printObj 添加内容
printObj: {id: 'printTest',popTitle: ' ', // 打印的标题extraCss: ' ', // 打印可引入外部的一个 css 文件beforeEntryIframe () {const cells = document.querySelectorAll('.cell')for (let k7 = 0; k7 < cells.length; k7++) {const cell = cells[k7]// 在这里添加样式只是修改了打印的样式,不会污染原页面的样式// 为了让表格中的内容自动换行,不需要的话可以删掉cell.style.whiteSpace = 'pre-wrap' }}}
找到printarea.js,找到getFormData函数,在尾部添加以下内容
const cells = document.querySelectorAll('.cell')const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')// el-table 打印不全的问题for (let k6 = 0; k6 < tableNode.length; k6++) {const tableItem = tableNode[k6]tableItem.style.width = '100%'const child = tableItem.childNodesfor (let i = 0; i < child.length; i++) {const element = child[i]if (element.localName === 'colgroup') {element.innerHTML = ''}}}// el-table 格子里面打印超过格子的问题for (let k7 = 0; k7 < cells.length; k7++) {const cell = cells[k7]cell.style.width = '100%'cell.removeAttribute('style')}
至此js文件修改完毕,点击打印按钮发现已经可以展示全,而且还可以换行展示
还有个问题就是点击打印的时候第一次没变化,在第二次的时候可以展示全,有思路的小伙伴欢迎在评论区留言哦
vue 使用vue-print-nb打印element表格展示不全相关推荐
- Vue -print - nb 打印插件 使用详解 以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
- vue-print-nb使用和解决打印element表格不全问题
vue-print-nb使用 安装 vue-print-nb npm install vue-print-nb --save 在main.js中引入 // main.js import Print f ...
- html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
- window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
- ie调用window.print批量打印数据表格。
需求 根据勾选的checkbox,一次将数据打印出来. 注意 1,我第一次是用循环一次一次调用window.print方法,想把数据一张一张打出来.结果因为输入输出流的问题,这样是一个死路. 取巧的思 ...
- Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦 网页样式 导出为表格 导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...
- vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据 官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
- vue打印elementUI表格边框显示不全
问题:vue打印elementUI表格边框显示不全(使用的window.print()) 在项目中需要实现打印功能,但是通常表格会打印不全 就像这个样子: 解决:使用原生的表格就不会存在这种问题了 打 ...
- vue 批量打印功能 打印自定义表格table
vue 批量打印功能 打印自定义表格table 批量打印功能 需求图 1.用excle先画出来 2.然后变为代码 点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存 然后在 ...
最新文章
- mysql创建反弹函数,MySql创建函数
- mysql排列组合实现_Java实现数列的排列组合
- gomod和govendor的简单理解
- C#中,什么时候用yield return
- tensorflow,显卡驱动,CUDA傻傻分不清
- 自然语言处理python进阶(二)
- ocupload完成文件上传(一键上传)
- Notepad++在编程使用时的小技巧
- OSChina 周五乱弹 —— 姑娘馋的口水都留下来了。
- 上下求索——基于双向推理的多跳知识库问答技术
- paip.mysql fulltext 全文搜索.最佳实践.
- 编程珠玑 啊哈 算法
- Android实战开发--制作圆形头像(简易篇)
- Vue3+Element-Plus 登录成功后主页退出功能实现 十八
- python清华源 断流_V2Ray断流异常
- Unity3D状态机运行状态不显示解决方案哈哈哈
- Java之Builder模式
- ppt版的pdf文件,被加密,知晓密码,想得到去水印后的ppt
- CCleaner解决的三个问题
- android培训课程!不同层级的Android开发者的不同行为,成功入职阿里