vue打印elementUI表格边框显示不全

问题：vue打印elementUI表格边框显示不全（使用的window.print()）

在项目中需要实现打印功能，但是通常表格会打印不全
就像这个样子：

解决：使用原生的表格就不会存在这种问题了

打印功能

使用window.print()打印功能
1、创建一个新的页面，将要打印的内容放入到页面中，打印成功后，然后销毁该页面(参考的其他人的代码)

//创建一个divvar  printPage= document.createElement("div");//插入要打印内容的styleprintPage.innerHTML = `<style> table {border-collapse: collapse;margin: 0 auto;text-align: center;border-color: #dcdfe6;color:#606266; } th,td { width: 150px;height: 60px;}</style>`//将要打印内容插入var content = this.$refs["content"];printPage.innerHTML += content.innerHTML;printPage.style.position = "fixed";printPage.style.left = "0";printPage.style.top = "0";printPage.style.width = "100%";printPage.style.height = "100%";printPage.style.zIndex = "1000";printPage.style.background = "#fff";printPage.style.overflow = "auto";document.body.appendChild(printPage);window.print();document.body.removeChild(printPage);

vue打印elementUI表格边框显示不全相关推荐

html word表格边框变成表格,word表格边框显示不全跨页面显示的解决方法
word表格是很多伙伴常会使用到的一款办公软件,那你晓得边框显示不全跨页面显示如何处理吗?如若不了解的话,就看看下文word表格边框显示不全跨页面显示的解决方法吧. word表格边框显示不全跨页面显示 ...
Excel表格在编辑状态时文字完整显示，但是预览和打印时表格内容显示不全问题，如何解决
首先说明,目前还没找到完善的解决方案,可以通过以下方式暂时处理(虽然达不到预期效果o(╥﹏╥)o),欢迎大家评论区讨论完善. 复现场景: 1.在Excel中针对以下表格已经设置过自动调整行高,且编辑状 ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
计算机word表格线设置在哪里,word表格文字显示不全_word表格怎么设置显示最后一行线？_word表格怎么加一行...
word表格中经常会碰到最后一行表格的下面的线显示不出,而如果转换成PDF则可以看到线.在网上搜索也没有正确的调整方法,后来经过多次调整表格,终于找到了一个比较好的解决方法. 1.如图1所示情况:首先 ...
打印html表格边框不显示,解决table边框在打印中不显示的问题 (转)
» 先了解一下,table边框如何设置一.只对表格table标签设置边框只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式. CSS代码: ...
火狐浏览器table表格的显示不全问题
解决火狐浏览器的表格展示不全由于本人在学习前端开发以来一直使用的是谷歌浏览器,在前两天的代码提交过程中碰到了table表格的边框展示问题,在我这边是没有什么问题的,但是在我们老大那里却出现了tabl ...
隐藏html表格边框显示,table显示所有边框 table的边框怎么显示不出来
css中怎么使table的内部边框显示出来? 怎么隐藏table所有边框设置了 cellpadding="0" border="0" cellspacing= ...
关于打印机打印网页出现字迹显示不全的问题心得
打印机打印wps等办公文件显示是正常的,当打印网页相关内容出现字迹显示不全,解决方案:把html设置为黑体就OK
Pycharm 打印大数据文件显示不全的解决方法
文章目录前言正文在Pycharm菜单找到Edit Custom Properties- 重启Pycharm 前言昨晚写了个小爬虫,简单分析下发现可以修改请求的url,直接获取所有目标的数据.想 ...

vue打印elementUI表格边框显示不全

问题：vue打印elementUI表格边框显示不全（使用的window.print()）

打印功能

vue打印elementUI表格边框显示不全相关推荐

最新文章

热门文章