VUE打印

Vue打印

vue版本

vue.cli

问题

在chrome中无法横向打印，打印页面中的「横纵向布局」选项不显示

解决

在页面中写入按键，设置按键事件。
在设置事件中，写入

print("div名称")

在app.vue文件中设置打印

@media print {
	  @page {
	    size: landscape;
	  }
  }

此时可以打印该div的页面

按键打印时隐藏

设置按键名(eg;noprint),在app.vue文件中的@media print 里设置新的函数事件，把display设置为none。

	@media print {
		  @page {
		    size: 27.9cm 21cm  landscape;
		  }
		  .noprint{
		    display: none;
		  }
	}