开发避坑短篇(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等。