页面效果 

<template><div><div class="d-flex flex-column mt5"><div class="d-flex flex-row " style="margin-bottom: 10px;justify-content: center;"><!-- 纸张大小 A3、A4 等 --><div class="paper"><template v-for="(value, type) in paperTypes"><button :class="curPaperType === type ? 'api' : 'info'" @click="setPaper(type, value)" :key="type">{{ type }}</button></template><!-- 自定义纸张 --><button :class="'other' == curPaperType ? 'api' : 'info'" class="auto" @click="showPaperPop">自定义纸张</button><div class="popover"><div class="popover-content d-flex" v-show="paperPopVisible"><div class="mt10" style="font-size: 16px; font-weight: bold">宽X高(mm):</div><div class="d-flex mt10"><input class="input" :value="paperWidth" type="number" placeholder="宽(mm)" /><span class="ml10 mr10">x</span><input class="input" :value="paperHeight" type="number" placeholder="高(mm)" /></div><button class="primary circle-10" style="margin-top: 6px" @click="setPaperOther">确定</button></div></div></div><button class="api circle-10 ml10" @click.stop="rotatePaper"><i class="iconfont sv-rotate" />旋转纸张(宽高互换)</button><button class="api circle-10 ml10" @click.stop="clearPaper"><i class="iconfont sv-clear" />清空纸张</button><button class="secondary circle-10 ml10" @click.stop="print"><i class="iconfont sv-printer" />浏览器打印</button><button class="warning circle-10 ml10" @click.stop="print2">直接打印(需要连接客户端)<i class="iconfont sv-printer" /></button><!-- 缩放 --><div class="d-flex flex-row align-center ml10" style="line-height: 25px;"><el-button icon="el-icon-z