vue实现页面打印的四种方法

一、原始window.print()

• 优点:便捷打印
• 缺点:不可打印指定的区域

//打印按钮
 <el-button class="printBox" type="primary" @click="printFn()" >打印</el-button>
 ...
 //打印方法
 printFn(){
   
 	window.print()
 }

二、指定区域的打印

• 优点:可以指定dom元素的打印
• 缺点:打印完可能造成页面部分不能用,如:表单不可输入,按钮触发不生效问题

<div id="printContent">
...打印区域...
</div>

 printFn() {
   
 	//printContent为打印区域所绑定的id
	let newstr = document.getElementById("printContent").innerHTML;
	let oldstr = document.body.innerHTML;
	document.body.innerHTML = newstr;
	window.print