开发避坑短篇(7)：Vue+window.print()打印实践

需求

vue 项目中如何打印当前页面内容？

解决办法

使用浏览器原生API window.print()，这是最简单直接的方式，通过调用window.print()方法触发浏览器打印功能‌。在vue项目中直接调用print()方法即可，无须引入任何插件。如下：
function handlePrint() { setTimeout(_ => print(), 500)}

打印页面样式控制

可以使用@media print来控制打印页面的样式。@media print 是 CSS 的媒体查询规则，‌专门用于定义文档在打印输出时的样式‌，与屏幕显示样式区分开来。当用户打印网页或使用打印预览功能时，浏览器会应用这些特殊样式规则。例如：
@media print { /**打印页面不显示按钮***/ .el-button { display: none; } /**隐藏浏览器默认添加的URL信息***/ @page { /* 关键设置：消除页眉页脚 */ margin: 0; size: auto; } body { /* 保留内容边距 */ margin: 1cm; }}

更多打印方案

对于复杂打印需求，可以使用iframe实现高级打印，或者引入第三方库，如vue-easy-print等。