85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<template>
|
||
<el-config-provider :locale="zhCn">
|
||
<el-row>
|
||
<el-button style="margin-left: 25px;" color="#626aef" v-print="'#printArea'"><el-icon>
|
||
<Printer />
|
||
</el-icon>打印标签</el-button>
|
||
</el-row>
|
||
<el-container class="content">
|
||
<!-- <div style="width: 0;height: 0;overflow: hidden"> -->
|
||
<div>
|
||
<div id="printArea" class="objectDialogFlowPrint">
|
||
<div class="myPrint">
|
||
<div class="pageWarp" v-for="item in printTabs">
|
||
<el-card :body-style="{ padding: '0px', display: 'flex' }">
|
||
<qrcode-vue :value="item.name + '&' + item.quantity" :size="size" :foreground="color"
|
||
level="H" style="margin: 15px" />
|
||
<div style="padding: 14px; text-align: left;">
|
||
<span style="font-size: 27pt;font-weight: bold; margin-left: 0;">零件号：{{ item.name
|
||
}}</span>
|
||
<br />
|
||
<span style="font-size: 27pt;font-weight: bold; margin-left: 0;">数 量：{{
|
||
item.quantity }}</span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-container>
|
||
</el-config-provider>
|
||
</template>
|
||
|
||
<script setup>
|
||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||
import { ref } from 'vue'
|
||
import QrcodeVue from 'qrcode.vue'
|
||
</script>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'printDemo',
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
printTabs: [
|
||
{
|
||
name: '测试物料1',
|
||
quantity: 1
|
||
},
|
||
{
|
||
name: '测试物料2',
|
||
quantity: 2
|
||
}
|
||
],
|
||
size: ref(200),
|
||
color: ref('#000000')
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.objectDialogFlowPrint .pageWarp {
|
||
/*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
|
||
page-break-after: always;
|
||
height: 100%;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 5px auto;
|
||
padding: auto;
|
||
}
|
||
|
||
.objectDialogFlowPrint .myPrint {
|
||
/* 打印的时候是否显示底色 */
|
||
print-color-adjust: exact;
|
||
}</style> |