js使用window.print()实现打印功能_js window.print-CSDN博客

本文链接：https://blog.csdn.net/weixin_45615375/article/details/124922929

这篇博客介绍了如何使用JavaScript的window.print()方法来实现网页内容的打印功能。首先，通过给需要打印的div绑定ref，然后在打印事件中获取并替换body内容。接着，设置了打印布局，包括横向、纵向和边距。此外，还提供了去除浏览器默认页眉页脚的方法，并展示了如何使用window.open()在新窗口中打印。最后，讨论了如何调整打印样式，如改变表格内容颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js使用window.print()来实现打印功能

1.首先在需要打印的内容标签上面绑定ref

<div ref="tableRef">
	需要打印的内容
</div>
<!--点击按钮打印-->
<el-button  @click="billPrintClick" >打印</el-button>

2.按钮打印事件

billPrintClick() {
	let newstr = this.$refs.tableRef.innerHTML  // 获取需要打印的内容
	let oldstr = document.body.innerHTML  // 获取别打印页面的内容
	document.body.innerHTML = newstr  
	// 获取表格表头，表格内容改变打印内容字体的颜色
	document.getElementsByTagName('thead')[0].style.color = '#000'
	document.getElementsByTagName('tbody')[0].style.color = '#000'
	window.print()
	document.body.innerHTML = oldstr
	window.location.reload()  // 退出刷新页面
	return false
}

3.设置打印布局（横向、纵向、边距）

@media print {
    @page {
      // 纵向
      size: portrait; 
 
     // 横向
      size: landscape;
 
      // 边距
      margin: 0cm 0cm 0cm 0cm;
    }
  }

4.去除浏览器默认页眉页脚
打印时默认有页眉页脚信息，显示在页面外边距范围，我们可以通过去除页面模型page的外边距，使其隐藏页眉页脚信息，再通过设置 body 元素的 margin 来保证打印出来的页面带有外边距

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

window.open()使用新窗口打印
我们还可以使用新窗口打印，将要打印的HTML，赋值给新窗口的body，打印之后我们再将之关闭

// 获取打印的区域
let newstr = this.$refs.tableRef.innerHTML; 
// 将打印的区域赋值给新窗口body，进行打印
let newWindow = window.open('','');
newWindow.document.write(newstr);
newWindow.window.print();
newWindow.window.close();  // 打印完成后关闭后新窗口