vue控制打印的横纵向
⽤单选框来切换打印时的⽅向
<div slot="footer" class="dialog-footer">
<el-radio v-model="isPortrait" label="1" @change="handleRadioChange">纵向</el-radio>
<el-radio v-model="isPortrait" label="0" @change="handleRadioChange">横向</el-radio>
</div>
通过css可以设置打印的横纵向
<style type="text/css" media="print">css变量
@page {
size: landscape;//横向
size: portrait;//纵向
}
</style>
由于不能在css⾥⽤变量控制size的改变，所以定义了⼀个变量把css当成了字符串，⽤v-html绑定在需要打印的div中styleText:'<style type="text/css" media="print">\n' + '  @page { size: portrait; }\n' + '</style>'
<div v-html="styleText"></div>
监听单选框的改变事件 ，在事件中改变size的值
handleRadioChange(){
if(this.isPortrait=='1'){
this.styleText='<style type="text/css" media="print">\n' + '  @page { size: portrait; }\n' + '</style>';
}else{
this.styleText='<style type="text/css" media="print">\n' + '  @page { size: landscape; }\n' + '</style>';
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。