位置: IT常识 - 正文

vue使用Print.js打印页面样式不出现的解决(vue-print-nb-jeecg)

编辑：rootadmin

这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教目录

推荐整理分享vue使用Print.js打印页面样式不出现的解决(vue-print-nb-jeecg)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue-print-nb-jeecg,vue print,vue-print-nb遇到的坑,vue-print-nb-jeecg,vueprintnb,vueprintnb,vue print,vue-print-nb,内容如对您有帮助，希望把文章链接给更多的朋友！

vue Print.js打印页面样式不出现解决方案vue-print-nb打印问题总结1、表格的列缺失（element-ui table组件）2、打印内容缺失（print.js/print-js独有，固定高度导致）4、不能分页vue Print.js打印页面样式不出现

解决方案

加上这句就好了！完美！

vue-print-nb打印问题总结1、表格的列缺失（element-ui table组件）

原因：table-layout: fixed导致的，出现部分列没有被打印

让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：

table { table-layout: fixed; }

则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。

这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。

解决方法：

注意点：

/deep/ table{ table-layout: auto !important; }

可能会造成样式错乱，比如你页面有table，打印弹出层的table，这样修改样式有可能会导致页面表格行错位，解决办法：在页面的<el-table>标签上加id,比如pagetable，修改less样式如下

原因：一般为了好看，会固定高度，然后超出内容出现滚动条，但是打印的时候，只会打印固定高度的内容，导致打印内容缺失

解决方法：

或者这样：

找到print.js的getStyle方法，加入一行代码

str += "<style>html,body,div{height: auto !important;}</style>";getStyle: function () { var str = "", styles = document.querySelectorAll('style,link'); for (var i = 0; i < styles.length; i++) { str += styles[i].outerHTML; } str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>"; str += "<style>html,body,div{height: auto !important;}</style>"; return str; },

注意点：

1、box是你固定高度标签的id，当然你也可以换成class或者其他，使样式生效即可

2、@media print只影响打印的样式，不会影响页面样式

3、表格内容缺失（表格滚动导致，只打印显示区域内容）

原因：不管是print.js还是vue-print-nb插件，都有这个问题，因为表格滚动导致

解决方法：

用一个隐藏div包裹你要打印的表格或者还有其他内容，总体包裹

注意点:

1、经过测试，A4纸大小宽度大致在650px，所以你隐藏的table列，要自己设置宽度，整体宽度在750左右，大于750，列会超出，不打印，小于750，右边会留有空白

2、<el-table>不能固定高度，所以不要设置高度

4、不能分页

原因：不管你是下载print.js保存到本地，还是npm下载print-js，只能打印一页，可能太菜了