vue-print-nb插件使用

vue 打印 vue-print-nb - 简书

1、@media print 内样式无效问题

<style lang="scss">
@media print {}
</style>

style上不能加scoped;

2、分页问题

A4纸的长宽：210mm×297mm，css中支持mm单位，可以直接使用，设置高度为297mm时，有时候会多出空白页，一直没搞明白为啥，于是我写的一页296.8mm，这样显示的比较好。

使用 page-break-before: always 在元素前始终插入分页符，避免多页时元素错位。

还有一些定位元素的位置靠下也会导致出现空白页，打印时不显示的元素最好删掉。

3、vue-print-nb打印 插件样式显示问题

vue-print-nb的打印逻辑是创建一个iframe，将我们要打印的节点加进去，之后再onload的时候触发打印，但是这个时候富文本的插件内容还没有加载出来，导致打印不对。

可以先预览再打印从而避免问题，或者不用插件直接自己写iframe然后打印。

<iframe srcdoc="<p>Hello world!</p>"></iframe>window.document.querySelectorAll('iframe')[0].contentWindow.print();