更正前端内容
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container">
|
<div class="label-container" :style="{ '--print-scale': printScale }">
|
||||||
<!-- 顶部公司信息 -->
|
<!-- 顶部公司信息 -->
|
||||||
<div class="company-header">
|
<div class="company-header">
|
||||||
<img :src="logo" alt="Company Logo" class="company-logo" />
|
<img :src="logo" alt="Company Logo" class="company-logo" />
|
||||||
@@ -152,9 +152,59 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
logo,
|
logo,
|
||||||
|
printScale: 1,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
// 监听打印事件，计算缩放比例
|
||||||
|
window.addEventListener('beforeprint', this.calculatePrintScale);
|
||||||
|
window.addEventListener('afterprint', this.resetPrintScale);
|
||||||
|
// 计算初始缩放比例
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calculatePrintScale();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('beforeprint', this.calculatePrintScale);
|
||||||
|
window.removeEventListener('afterprint', this.resetPrintScale);
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
calculatePrintScale() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const container = this.$el;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
// 纸张尺寸：180mm x 100mm
|
||||||
|
// 1mm ≈ 3.779527559px (96 DPI)
|
||||||
|
const paperWidth = 180 * 3.779527559; // 约 680.3px
|
||||||
|
const paperHeight = 100 * 3.779527559; // 约 377.95px
|
||||||
|
|
||||||
|
// 获取内容实际尺寸
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const contentWidth = rect.width;
|
||||||
|
const contentHeight = rect.height;
|
||||||
|
|
||||||
|
// 计算缩放比例（留出2mm边距）
|
||||||
|
const margin = 2 * 3.779527559; // 约 7.56px
|
||||||
|
const availableWidth = paperWidth - margin * 2;
|
||||||
|
const availableHeight = paperHeight - margin * 2;
|
||||||
|
|
||||||
|
const scaleX = availableWidth / contentWidth;
|
||||||
|
const scaleY = availableHeight / contentHeight;
|
||||||
|
|
||||||
|
// 取较小的缩放比例，确保内容完全适配
|
||||||
|
this.printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
|
||||||
|
|
||||||
|
// 设置CSS变量
|
||||||
|
container.style.setProperty('--print-scale', this.printScale);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetPrintScale() {
|
||||||
|
this.printScale = 1;
|
||||||
|
if (this.$el) {
|
||||||
|
this.$el.style.setProperty('--print-scale', 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -285,85 +335,81 @@ export default {
|
|||||||
print-color-adjust: exact;
|
print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
padding: 0;
|
padding: 0 !important;
|
||||||
|
width: 180mm;
|
||||||
|
height: 100mm;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏所有其他内容，只显示标签 */
|
||||||
|
body > *:not(.label-container) {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-container {
|
.label-container {
|
||||||
width: 180mm;
|
/* 使用固定纸张尺寸 */
|
||||||
height: 100mm;
|
width: 180mm !important;
|
||||||
max-width: 180mm;
|
height: 100mm !important;
|
||||||
max-height: 100mm;
|
max-width: 180mm !important;
|
||||||
padding: 2mm;
|
max-height: 100mm !important;
|
||||||
margin: 0;
|
padding: 2mm !important;
|
||||||
page-break-inside: avoid;
|
margin: 0 !important;
|
||||||
break-inside: avoid;
|
|
||||||
page-break-after: avoid;
|
/* 防止分页 */
|
||||||
break-after: avoid;
|
page-break-inside: avoid !important;
|
||||||
page-break-before: avoid;
|
break-inside: avoid !important;
|
||||||
break-before: avoid;
|
page-break-after: avoid !important;
|
||||||
overflow: hidden;
|
break-after: avoid !important;
|
||||||
box-sizing: border-box;
|
page-break-before: avoid !important;
|
||||||
font-size: 10px;
|
break-before: avoid !important;
|
||||||
transform-origin: top left;
|
|
||||||
|
/* 确保内容不溢出 */
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
|
||||||
|
/* 应用动态缩放 */
|
||||||
|
transform: scale(var(--print-scale, 1)) !important;
|
||||||
|
transform-origin: top left !important;
|
||||||
|
|
||||||
|
/* 计算缩放后的实际占用空间，确保不超出纸张 */
|
||||||
|
position: relative !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 打印时调整字体和间距，使用相对单位自动缩放 */
|
||||||
.company-header {
|
.company-header {
|
||||||
margin-bottom: 1mm;
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.company-logo {
|
.company-logo {
|
||||||
width: 12mm;
|
width: 4em;
|
||||||
height: 12mm;
|
height: 4em;
|
||||||
margin-right: 2mm;
|
margin-right: 0.5em;
|
||||||
}
|
|
||||||
|
|
||||||
.company-name {
|
|
||||||
font-size: 2.5mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 5mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.english-name {
|
|
||||||
font-size: 1.5mm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-grid {
|
.info-grid {
|
||||||
margin-bottom: 1mm;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-grid-item {
|
.info-grid-item {
|
||||||
padding: 0.5mm;
|
padding: 0.1em;
|
||||||
font-size: 2.2mm;
|
font-size: 1.05em;
|
||||||
height: 5mm;
|
height: 2em;
|
||||||
min-height: 5mm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-info {
|
.footer-info {
|
||||||
font-size: 1.8mm;
|
font-size: 0.7em;
|
||||||
margin-top: 1mm;
|
margin-top: 0.3em;
|
||||||
}
|
|
||||||
|
|
||||||
.address {
|
|
||||||
font-size: 1.8mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.english-address {
|
|
||||||
font-size: 1.6mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-timestamp {
|
|
||||||
font-size: 1.8mm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保二维码在打印时正确显示 */
|
/* 确保二维码在打印时正确显示 */
|
||||||
.contact-timestamp img,
|
.contact-timestamp img,
|
||||||
.contact-timestamp canvas {
|
.contact-timestamp canvas {
|
||||||
max-width: 15mm;
|
width: 15mm !important;
|
||||||
max-height: 15mm;
|
height: 15mm !important;
|
||||||
|
max-width: 15mm !important;
|
||||||
|
max-height: 15mm !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="material-label-container">
|
<div class="material-label-container" :style="{ '--print-scale': printScale }">
|
||||||
<table class="material-label-table">
|
<table class="material-label-table">
|
||||||
<!-- 调整第一行结构，使label和value各占2列（等宽） -->
|
<!-- 调整第一行结构，使label和value各占2列（等宽） -->
|
||||||
<tr>
|
<tr>
|
||||||
@@ -83,6 +83,62 @@ export default {
|
|||||||
qrcodeRecordId: '',
|
qrcodeRecordId: '',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
printScale: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 监听打印事件，计算缩放比例
|
||||||
|
window.addEventListener('beforeprint', this.calculatePrintScale);
|
||||||
|
window.addEventListener('afterprint', this.resetPrintScale);
|
||||||
|
// 计算初始缩放比例
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calculatePrintScale();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('beforeprint', this.calculatePrintScale);
|
||||||
|
window.removeEventListener('afterprint', this.resetPrintScale);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
calculatePrintScale() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const container = this.$el;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
// 纸张尺寸：180mm x 100mm
|
||||||
|
// 1mm ≈ 3.779527559px (96 DPI)
|
||||||
|
const paperWidth = 180 * 3.779527559; // 约 680.3px
|
||||||
|
const paperHeight = 100 * 3.779527559; // 约 377.95px
|
||||||
|
|
||||||
|
// 获取内容实际尺寸
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const contentWidth = rect.width;
|
||||||
|
const contentHeight = rect.height;
|
||||||
|
|
||||||
|
// 计算缩放比例（留出2mm边距）
|
||||||
|
const margin = 2 * 3.779527559; // 约 7.56px
|
||||||
|
const availableWidth = paperWidth - margin * 2;
|
||||||
|
const availableHeight = paperHeight - margin * 2;
|
||||||
|
|
||||||
|
const scaleX = availableWidth / contentWidth;
|
||||||
|
const scaleY = availableHeight / contentHeight;
|
||||||
|
|
||||||
|
// 取较小的缩放比例，确保内容完全适配
|
||||||
|
this.printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
|
||||||
|
|
||||||
|
// 设置CSS变量
|
||||||
|
container.style.setProperty('--print-scale', this.printScale);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetPrintScale() {
|
||||||
|
this.printScale = 1;
|
||||||
|
if (this.$el) {
|
||||||
|
this.$el.style.setProperty('--print-scale', 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -147,41 +203,56 @@ export default {
|
|||||||
print-color-adjust: exact;
|
print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
padding: 0;
|
padding: 0 !important;
|
||||||
|
width: 180mm;
|
||||||
|
height: 100mm;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏所有其他内容，只显示标签 */
|
||||||
|
body > *:not(.material-label-container) {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label-container {
|
.material-label-container {
|
||||||
width: 180mm;
|
/* 使用固定纸张尺寸 */
|
||||||
height: 100mm;
|
width: 180mm !important;
|
||||||
max-width: 180mm;
|
height: 100mm !important;
|
||||||
max-height: 100mm;
|
max-width: 180mm !important;
|
||||||
padding: 2mm;
|
max-height: 100mm !important;
|
||||||
margin: 0;
|
padding: 2mm !important;
|
||||||
page-break-inside: avoid;
|
margin: 0 !important;
|
||||||
break-inside: avoid;
|
|
||||||
page-break-after: avoid;
|
/* 防止分页 */
|
||||||
break-after: avoid;
|
page-break-inside: avoid !important;
|
||||||
page-break-before: avoid;
|
break-inside: avoid !important;
|
||||||
break-before: avoid;
|
page-break-after: avoid !important;
|
||||||
overflow: hidden;
|
break-after: avoid !important;
|
||||||
box-sizing: border-box;
|
page-break-before: avoid !important;
|
||||||
font-size: 10px;
|
break-before: avoid !important;
|
||||||
transform-origin: top left;
|
|
||||||
|
/* 确保内容不溢出 */
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
|
||||||
|
/* 应用动态缩放 */
|
||||||
|
transform: scale(var(--print-scale, 1)) !important;
|
||||||
|
transform-origin: top left !important;
|
||||||
|
|
||||||
|
/* 计算缩放后的实际占用空间，确保不超出纸张 */
|
||||||
|
position: relative !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label-table {
|
.material-label-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 2.5mm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label-table td {
|
.material-label-table td {
|
||||||
padding: 1mm;
|
padding: 0;
|
||||||
font-size: 2.5mm;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 8mm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-cell {
|
.label-cell {
|
||||||
@@ -192,8 +263,10 @@ export default {
|
|||||||
/* 确保二维码在打印时正确显示 */
|
/* 确保二维码在打印时正确显示 */
|
||||||
.value-cell img,
|
.value-cell img,
|
||||||
.value-cell canvas {
|
.value-cell canvas {
|
||||||
max-width: 10mm;
|
width: 10mm !important;
|
||||||
max-height: 10mm;
|
height: 10mm !important;
|
||||||
|
max-width: 10mm !important;
|
||||||
|
max-height: 10mm !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user