vue中调用window.print进行打印

可以通过组件插槽获取打印信息

子组件中写入

<slot></slot>

因父组件引用子组件名称为print-dialog所以在里面写你想要传载的模板信息

<print-dialog>
	<div>你的模板信息 自定义样式 以及数据</div>
</print-dialog>

如果说你想要分页，你可以在你的模板里面添加样式属性

style="page-break-after: always"

具体的分页功能结合自身实际业务场景 可设置动态
而在子组件中我是这么包含的

<div style="height: 300px; overflow: auto">
	<div id="printcontent" ref="printcontent">
        <slot></slot>
    </div>
</div>

调用打印方法如下

let printH = document.getElementById("printcontent").outerHTML;
let iframe = document.createElement("iframe");
document.getElementsByTagName("body")[0].appendChild(iframe);
let doc = iframe.contentDocument || iframe.contentWindow.document;
doc.write(printH);
iframe.contentWindow.focus();
iframe.contentWindow.print();
doc.close();
document.body.removeChild(iframe);

编写打印 可以通过三种方式
一个是直接调用window.print()
一个是通过新开窗口 window.open()
最后一个是通过iframe进行传值 进行打印

去除打印预览中的页眉页脚

正常调用打印，进入到打印预览中是会将你的网址 时间 模块名称 页数也一并打印出来，
这样是不符合客户需求的 所以你可以通过如下设置去除掉

<style media="print" scoped>
    @page {
      size: auto;
      margin: 0mm;
    }
</style>

如果说不生效，可能就是你的某一个样式给顶死了 导致的
之前我也是 去除掉某一个样式之后生效的