+-
我是使用vue-easy-print插件来实现模太框内的打印。
模太框的代码如下:
<template>
<div class="printDialog">
<el-dialog
:visible.sync="printvisible"
:title="print_params.title"
:width="print_params.width"
:modal="print_params.modal"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
append-to-body
>
<el-scrollbar style="height: 70vh">
<vueEasyPrint tableShow ref="easyPrint" v-if="chosenFlag == 1">
<topEightTablePrint
:topEight_params="print_params.checkData"
:tableTitle="tableTitle"
></topEightTablePrint>
</vueEasyPrint>
<vueEasyPrint tableShow ref="easyPrint" v-if="chosenFlag == 2">
<nonRoadMovePrint
:nonRoadMove_params="print_params.checkData"
:tableTitle="tableTitle"
></nonRoadMovePrint>
</vueEasyPrint>
<vueEasyPrint tableShow ref="easyPrint" v-if="chosenFlag == 3">
<nonRoadDieselPrint
:nonRoadDiesel_params="print_params.checkData"
:tableTitle="tableTitle"
></nonRoadDieselPrint>
</vueEasyPrint>
<vueEasyPrint tableShow ref="easyPrint" v-if="chosenFlag == 4">
<engineTablePrint
:engine_params="print_params.checkData"
:tableTitle="tableTitle"
></engineTablePrint>
</vueEasyPrint>
</el-scrollbar>
<div style="text-align: center;margin-top:0.9375rem">
<el-button @click="close_modal" type="primary">关闭</el-button>
<el-button @click="print_check" type="primary">打印</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
methods: {
print_check() {
this.$refs.easyPrint.print();
},
}
}
</script>
topEightTablePrint组件的style代码我添加了缩放比例设置:
@media print {
html {
zoom: 77%;
}
}
但是都不起效果,麻烦帮忙看一下,可以怎么解决,谢谢!