更正前端内容
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="label-container">
|
||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
||||
<!-- 顶部公司信息 -->
|
||||
<div class="company-header">
|
||||
<img :src="logo" alt="Company Logo" class="company-logo" />
|
||||
@@ -152,9 +152,59 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
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: {
|
||||
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>
|
||||
@@ -285,85 +335,81 @@ export default {
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
html, body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 180mm;
|
||||
height: 100mm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 隐藏所有其他内容，只显示标签 */
|
||||
body > *:not(.label-container) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
width: 180mm;
|
||||
height: 100mm;
|
||||
max-width: 180mm;
|
||||
max-height: 100mm;
|
||||
padding: 2mm;
|
||||
margin: 0;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
page-break-before: avoid;
|
||||
break-before: avoid;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
font-size: 10px;
|
||||
transform-origin: top left;
|
||||
/* 使用固定纸张尺寸 */
|
||||
width: 180mm !important;
|
||||
height: 100mm !important;
|
||||
max-width: 180mm !important;
|
||||
max-height: 100mm !important;
|
||||
padding: 2mm !important;
|
||||
margin: 0 !important;
|
||||
|
||||
/* 防止分页 */
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
page-break-after: avoid !important;
|
||||
break-after: avoid !important;
|
||||
page-break-before: avoid !important;
|
||||
break-before: avoid !important;
|
||||
|
||||
/* 确保内容不溢出 */
|
||||
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 {
|
||||
margin-bottom: 1mm;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 12mm;
|
||||
height: 12mm;
|
||||
margin-right: 2mm;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 2.5mm;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 5mm;
|
||||
}
|
||||
|
||||
.english-name {
|
||||
font-size: 1.5mm;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
margin-bottom: 1mm;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.info-grid-item {
|
||||
padding: 0.5mm;
|
||||
font-size: 2.2mm;
|
||||
height: 5mm;
|
||||
min-height: 5mm;
|
||||
padding: 0.1em;
|
||||
font-size: 1.05em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
font-size: 1.8mm;
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 1.8mm;
|
||||
}
|
||||
|
||||
.english-address {
|
||||
font-size: 1.6mm;
|
||||
}
|
||||
|
||||
.contact-timestamp {
|
||||
font-size: 1.8mm;
|
||||
font-size: 0.7em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
/* 确保二维码在打印时正确显示 */
|
||||
.contact-timestamp img,
|
||||
.contact-timestamp canvas {
|
||||
max-width: 15mm;
|
||||
max-height: 15mm;
|
||||
width: 15mm !important;
|
||||
height: 15mm !important;
|
||||
max-width: 15mm !important;
|
||||
max-height: 15mm !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="material-label-container">
|
||||
<div class="material-label-container" :style="{ '--print-scale': printScale }">
|
||||
<table class="material-label-table">
|
||||
<!-- 调整第一行结构，使label和value各占2列（等宽） -->
|
||||
<tr>
|
||||
@@ -83,6 +83,62 @@ export default {
|
||||
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>
|
||||
@@ -147,41 +203,56 @@ export default {
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
html, body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 180mm;
|
||||
height: 100mm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 隐藏所有其他内容，只显示标签 */
|
||||
body > *:not(.material-label-container) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.material-label-container {
|
||||
width: 180mm;
|
||||
height: 100mm;
|
||||
max-width: 180mm;
|
||||
max-height: 100mm;
|
||||
padding: 2mm;
|
||||
margin: 0;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
page-break-before: avoid;
|
||||
break-before: avoid;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
font-size: 10px;
|
||||
transform-origin: top left;
|
||||
/* 使用固定纸张尺寸 */
|
||||
width: 180mm !important;
|
||||
height: 100mm !important;
|
||||
max-width: 180mm !important;
|
||||
max-height: 100mm !important;
|
||||
padding: 2mm !important;
|
||||
margin: 0 !important;
|
||||
|
||||
/* 防止分页 */
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
page-break-after: avoid !important;
|
||||
break-after: avoid !important;
|
||||
page-break-before: avoid !important;
|
||||
break-before: avoid !important;
|
||||
|
||||
/* 确保内容不溢出 */
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 2.5mm;
|
||||
}
|
||||
|
||||
.material-label-table td {
|
||||
padding: 1mm;
|
||||
font-size: 2.5mm;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
min-height: 8mm;
|
||||
}
|
||||
|
||||
.label-cell {
|
||||
@@ -192,8 +263,10 @@ export default {
|
||||
/* 确保二维码在打印时正确显示 */
|
||||
.value-cell img,
|
||||
.value-cell canvas {
|
||||
max-width: 10mm;
|
||||
max-height: 10mm;
|
||||
width: 10mm !important;
|
||||
height: 10mm !important;
|
||||
max-width: 10mm !important;
|
||||
max-height: 10mm !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user