refactor: 移除多个标签组件的手动打印缩放逻辑与打印样式
移除了11个物料标签组件中的打印监听事件、动态缩放计算逻辑以及单独的打印样式代码，改为依赖浏览器原生打印适配能力，简化组件代码结构。
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="label-box">
|
<div class="label-box">
|
||||||
<!-- 顶部公司信息 -->
|
<!-- 顶部公司信息 -->
|
||||||
<div class="company-header">
|
<div class="company-header">
|
||||||
@@ -201,111 +201,13 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
logo,
|
logo,
|
||||||
printScale: 1,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 使用 matchMedia 监听打印状态（更可靠）
|
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
|
|
||||||
// 监听打印事件作为备用
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
|
|
||||||
// 计算初始缩放比例
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
if (mq.matches) {
|
|
||||||
// 进入打印模式
|
|
||||||
this.calculatePrintScale();
|
|
||||||
} else {
|
|
||||||
// 退出打印模式
|
|
||||||
this.resetPrintScale();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
// 延迟计算，确保DOM已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// 纸张尺寸：180mm x 100mm
|
|
||||||
// 在打印时，使用 mm 单位更准确
|
|
||||||
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
|
|
||||||
// 为了更准确，我们直接使用 mm 转 px 的通用计算
|
|
||||||
const dpi = 96; // 标准 DPI
|
|
||||||
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
|
|
||||||
|
|
||||||
const paperWidthMm = this.paperWidthMm || 180;
|
|
||||||
const paperHeightMm = this.paperHeightMm || 100;
|
|
||||||
const marginMm = 2;
|
|
||||||
|
|
||||||
const paperWidthPx = paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = paperHeightMm * mmToPx;
|
|
||||||
const marginPx = marginMm * mmToPx;
|
|
||||||
|
|
||||||
// 获取内容实际尺寸（在屏幕上的尺寸）
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let contentWidth = rect.width;
|
|
||||||
let contentHeight = rect.height;
|
|
||||||
|
|
||||||
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
|
|
||||||
if (contentWidth === 0 || contentHeight === 0) {
|
|
||||||
contentWidth = container.scrollWidth || contentWidth;
|
|
||||||
contentHeight = container.scrollHeight || contentHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算可用空间（减去边距）
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
// 计算缩放比例
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
|
|
||||||
// 设置CSS变量和内联样式
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
|
|
||||||
|
|
||||||
console.log('打印缩放计算:', {
|
|
||||||
contentSize: { width: contentWidth, height: contentHeight },
|
|
||||||
paperSize: { width: paperWidthPx, height: paperHeightPx },
|
|
||||||
scale: this.printScale
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -460,51 +362,4 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 180mm 100mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏所有其他内容，只显示标签容器 */
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
/* 防止分页 - 多重保护 */
|
|
||||||
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;
|
|
||||||
orphans: 999 !important;
|
|
||||||
widows: 999 !important;
|
|
||||||
|
|
||||||
/* 应用动态缩放，保持原有样式 */
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
|
|
||||||
/* 确保缩放后不超出纸张 */
|
|
||||||
max-width: var(--paper-width, 180mm) !important;
|
|
||||||
max-height: var(--paper-height, 100mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="label-box">
|
<div class="label-box">
|
||||||
<!-- 顶部公司信息 -->
|
<!-- 顶部公司信息 -->
|
||||||
<div class="company-header">
|
<div class="company-header">
|
||||||
@@ -202,111 +202,13 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
logo,
|
logo,
|
||||||
printScale: 1,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 使用 matchMedia 监听打印状态（更可靠）
|
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
|
|
||||||
// 监听打印事件作为备用
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
|
|
||||||
// 计算初始缩放比例
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
if (mq.matches) {
|
|
||||||
// 进入打印模式
|
|
||||||
this.calculatePrintScale();
|
|
||||||
} else {
|
|
||||||
// 退出打印模式
|
|
||||||
this.resetPrintScale();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
// 延迟计算，确保DOM已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// 纸张尺寸：180mm x 100mm
|
|
||||||
// 在打印时，使用 mm 单位更准确
|
|
||||||
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
|
|
||||||
// 为了更准确，我们直接使用 mm 转 px 的通用计算
|
|
||||||
const dpi = 96; // 标准 DPI
|
|
||||||
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
|
|
||||||
|
|
||||||
const paperWidthMm = this.paperWidthMm || 180;
|
|
||||||
const paperHeightMm = this.paperHeightMm || 100;
|
|
||||||
const marginMm = 2;
|
|
||||||
|
|
||||||
const paperWidthPx = paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = paperHeightMm * mmToPx;
|
|
||||||
const marginPx = marginMm * mmToPx;
|
|
||||||
|
|
||||||
// 获取内容实际尺寸（在屏幕上的尺寸）
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let contentWidth = rect.width;
|
|
||||||
let contentHeight = rect.height;
|
|
||||||
|
|
||||||
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
|
|
||||||
if (contentWidth === 0 || contentHeight === 0) {
|
|
||||||
contentWidth = container.scrollWidth || contentWidth;
|
|
||||||
contentHeight = container.scrollHeight || contentHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算可用空间（减去边距）
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
// 计算缩放比例
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
|
|
||||||
// 设置CSS变量和内联样式
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
|
|
||||||
|
|
||||||
console.log('打印缩放计算:', {
|
|
||||||
contentSize: { width: contentWidth, height: contentHeight },
|
|
||||||
paperSize: { width: paperWidthPx, height: paperHeightPx },
|
|
||||||
scale: this.printScale
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -461,51 +363,4 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 180mm 100mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏所有其他内容，只显示标签容器 */
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
/* 防止分页 - 多重保护 */
|
|
||||||
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;
|
|
||||||
orphans: 999 !important;
|
|
||||||
widows: 999 !important;
|
|
||||||
|
|
||||||
/* 应用动态缩放，保持原有样式 */
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
|
|
||||||
/* 确保缩放后不超出纸张 */
|
|
||||||
max-width: var(--paper-width, 180mm) !important;
|
|
||||||
max-height: var(--paper-height, 100mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -96,8 +96,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -111,66 +109,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatDate(dateStr) {
|
formatDate(dateStr) {
|
||||||
// 格式化为YYYY.mm.dd
|
// 格式化为YYYY.mm.dd
|
||||||
if (!dateStr) return '';
|
if (!dateStr) return '';
|
||||||
@@ -288,38 +230,4 @@ export default {
|
|||||||
font-family: var(--label-font);
|
font-family: var(--label-font);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<table class="material-label-table">
|
<table class="material-label-table">
|
||||||
<!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 -->
|
<!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 -->
|
||||||
<tr>
|
<tr>
|
||||||
@@ -179,7 +179,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -193,98 +192,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 使用 matchMedia 监听打印状态（更可靠）
|
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
|
|
||||||
// 监听打印事件作为备用
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
|
|
||||||
// 计算初始缩放比例
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
if (mq.matches) {
|
|
||||||
// 进入打印模式
|
|
||||||
this.calculatePrintScale();
|
|
||||||
} else {
|
|
||||||
// 退出打印模式
|
|
||||||
this.resetPrintScale();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
// 延迟计算，确保DOM已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// 纸张尺寸：180mm x 100mm
|
|
||||||
const dpi = 96; // 标准 DPI
|
|
||||||
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
|
|
||||||
|
|
||||||
const paperWidthMm = this.paperWidthMm || 100;
|
|
||||||
const paperHeightMm = this.paperHeightMm || 80;
|
|
||||||
const marginMm = 2;
|
|
||||||
|
|
||||||
const paperWidthPx = paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = paperHeightMm * mmToPx;
|
|
||||||
const marginPx = marginMm * mmToPx;
|
|
||||||
|
|
||||||
// 获取内容实际尺寸
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let contentWidth = rect.width;
|
|
||||||
let contentHeight = rect.height;
|
|
||||||
|
|
||||||
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
|
|
||||||
if (contentWidth === 0 || contentHeight === 0) {
|
|
||||||
contentWidth = container.scrollWidth || contentWidth;
|
|
||||||
contentHeight = container.scrollHeight || contentHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算可用空间（减去边距）
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
// 计算缩放比例
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
|
|
||||||
// 设置CSS变量和内联样式
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -362,51 +273,4 @@ export default {
|
|||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 - 强制单页，适配100mm x 80mm纸张，保持原有样式不变 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏所有其他内容，只显示标签容器 */
|
|
||||||
body>*:not(.material-label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-label-container {
|
|
||||||
/* 防止分页 - 多重保护 */
|
|
||||||
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;
|
|
||||||
orphans: 999 !important;
|
|
||||||
widows: 999 !important;
|
|
||||||
|
|
||||||
/* 应用动态缩放，保持原有样式 */
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
|
|
||||||
/* 确保缩放后不超出纸张 */
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="label-box">
|
<div class="label-box">
|
||||||
<!-- 顶部公司信息 -->
|
<!-- 顶部公司信息 -->
|
||||||
<div class="company-header">
|
<div class="company-header">
|
||||||
@@ -208,111 +208,13 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
logo,
|
logo,
|
||||||
printScale: 1,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 使用 matchMedia 监听打印状态（更可靠）
|
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
|
|
||||||
// 监听打印事件作为备用
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
|
|
||||||
// 计算初始缩放比例
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
if (mq.matches) {
|
|
||||||
// 进入打印模式
|
|
||||||
this.calculatePrintScale();
|
|
||||||
} else {
|
|
||||||
// 退出打印模式
|
|
||||||
this.resetPrintScale();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
// 延迟计算，确保DOM已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// 纸张尺寸：180mm x 100mm
|
|
||||||
// 在打印时，使用 mm 单位更准确
|
|
||||||
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
|
|
||||||
// 为了更准确，我们直接使用 mm 转 px 的通用计算
|
|
||||||
const dpi = 96; // 标准 DPI
|
|
||||||
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
|
|
||||||
|
|
||||||
const paperWidthMm = this.paperWidthMm || 180;
|
|
||||||
const paperHeightMm = this.paperHeightMm || 100;
|
|
||||||
const marginMm = 2;
|
|
||||||
|
|
||||||
const paperWidthPx = paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = paperHeightMm * mmToPx;
|
|
||||||
const marginPx = marginMm * mmToPx;
|
|
||||||
|
|
||||||
// 获取内容实际尺寸（在屏幕上的尺寸）
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let contentWidth = rect.width;
|
|
||||||
let contentHeight = rect.height;
|
|
||||||
|
|
||||||
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
|
|
||||||
if (contentWidth === 0 || contentHeight === 0) {
|
|
||||||
contentWidth = container.scrollWidth || contentWidth;
|
|
||||||
contentHeight = container.scrollHeight || contentHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算可用空间（减去边距）
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
// 计算缩放比例
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
|
|
||||||
// 设置CSS变量和内联样式
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
|
|
||||||
|
|
||||||
console.log('打印缩放计算:', {
|
|
||||||
contentSize: { width: contentWidth, height: contentHeight },
|
|
||||||
paperSize: { width: paperWidthPx, height: paperHeightPx },
|
|
||||||
scale: this.printScale
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -467,51 +369,4 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 180mm 100mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏所有其他内容，只显示标签容器 */
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
/* 防止分页 - 多重保护 */
|
|
||||||
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;
|
|
||||||
orphans: 999 !important;
|
|
||||||
widows: 999 !important;
|
|
||||||
|
|
||||||
/* 应用动态缩放，保持原有样式 */
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
|
|
||||||
/* 确保缩放后不超出纸张 */
|
|
||||||
max-width: var(--paper-width, 180mm) !important;
|
|
||||||
max-height: var(--paper-height, 100mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -96,8 +96,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -111,66 +109,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatDate(dateStr) {
|
formatDate(dateStr) {
|
||||||
// 格式化为YYYY.mm.dd
|
// 格式化为YYYY.mm.dd
|
||||||
if (!dateStr) return '';
|
if (!dateStr) return '';
|
||||||
@@ -288,38 +230,4 @@ export default {
|
|||||||
font-family: var(--label-font);
|
font-family: var(--label-font);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -87,8 +87,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -102,66 +100,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatDate(dateStr) {
|
formatDate(dateStr) {
|
||||||
// 格式化为YYYY.mm.dd
|
// 格式化为YYYY.mm.dd
|
||||||
if (!dateStr) return '';
|
if (!dateStr) return '';
|
||||||
@@ -279,38 +221,4 @@ export default {
|
|||||||
font-family: var(--label-font);
|
font-family: var(--label-font);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -100,8 +100,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -115,66 +113,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -274,39 +216,4 @@ export default {
|
|||||||
.current-coil-no, .enter-coil-no {
|
.current-coil-no, .enter-coil-no {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -100,8 +100,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -115,66 +113,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -274,39 +216,4 @@ export default {
|
|||||||
.current-coil-no, .enter-coil-no {
|
.current-coil-no, .enter-coil-no {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<table class="material-label-table">
|
<table class="material-label-table">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="label-cell" style="width: 16.67%; padding: 4px;">卷号</td>
|
<td class="label-cell" style="width: 16.67%; padding: 4px;">卷号</td>
|
||||||
@@ -83,102 +83,13 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 使用 matchMedia 监听打印状态（更可靠）
|
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
|
|
||||||
// 监听打印事件作为备用
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
|
|
||||||
// 计算初始缩放比例
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
if (mq.matches) {
|
|
||||||
// 进入打印模式
|
|
||||||
this.calculatePrintScale();
|
|
||||||
} else {
|
|
||||||
// 退出打印模式
|
|
||||||
this.resetPrintScale();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
// 延迟计算，确保DOM已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// 纸张尺寸：180mm x 100mm
|
|
||||||
const dpi = 96; // 标准 DPI
|
|
||||||
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
|
|
||||||
|
|
||||||
const paperWidthMm = this.paperWidthMm || 100;
|
|
||||||
const paperHeightMm = this.paperHeightMm || 80;
|
|
||||||
const marginMm = 2;
|
|
||||||
|
|
||||||
const paperWidthPx = paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = paperHeightMm * mmToPx;
|
|
||||||
const marginPx = marginMm * mmToPx;
|
|
||||||
|
|
||||||
// 获取内容实际尺寸
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
let contentWidth = rect.width;
|
|
||||||
let contentHeight = rect.height;
|
|
||||||
|
|
||||||
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
|
|
||||||
if (contentWidth === 0 || contentHeight === 0) {
|
|
||||||
contentWidth = container.scrollWidth || contentWidth;
|
|
||||||
contentHeight = container.scrollHeight || contentHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算可用空间（减去边距）
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
// 计算缩放比例
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
|
|
||||||
// 设置CSS变量和内联样式
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -252,51 +163,4 @@ export default {
|
|||||||
font-family: var(--label-font);
|
font-family: var(--label-font);
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 打印样式 - 强制单页，适配100mm x 80mm纸张，保持原有样式不变 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏所有其他内容，只显示标签容器 */
|
|
||||||
body>*:not(.material-label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-label-container {
|
|
||||||
/* 防止分页 - 多重保护 */
|
|
||||||
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;
|
|
||||||
orphans: 999 !important;
|
|
||||||
widows: 999 !important;
|
|
||||||
|
|
||||||
/* 应用动态缩放，保持原有样式 */
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
|
|
||||||
/* 确保缩放后不超出纸张 */
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
<div class="label-container">
|
||||||
<div class="material-label-grid">
|
<div class="material-label-grid">
|
||||||
<!-- 公司名称行 -->
|
<!-- 公司名称行 -->
|
||||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||||
@@ -100,8 +100,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
printScale: 1,
|
|
||||||
printMediaQuery: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -115,66 +113,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.printMediaQuery = window.matchMedia('print');
|
|
||||||
this.printMediaQuery.addListener(this.handlePrintMediaChange);
|
|
||||||
window.addEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.addEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.calculatePrintScale();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.printMediaQuery) {
|
|
||||||
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
|
|
||||||
}
|
|
||||||
window.removeEventListener('beforeprint', this.handleBeforePrint);
|
|
||||||
window.removeEventListener('afterprint', this.handleAfterPrint);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlePrintMediaChange(mq) {
|
|
||||||
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
|
|
||||||
},
|
|
||||||
handleBeforePrint() {
|
|
||||||
setTimeout(() => this.calculatePrintScale(), 100);
|
|
||||||
},
|
|
||||||
handleAfterPrint() {
|
|
||||||
this.resetPrintScale();
|
|
||||||
},
|
|
||||||
calculatePrintScale() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$el;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const dpi = 96;
|
|
||||||
const mmToPx = dpi / 25.4;
|
|
||||||
const paperWidthPx = this.paperWidthMm * mmToPx;
|
|
||||||
const paperHeightPx = this.paperHeightMm * mmToPx;
|
|
||||||
const marginPx = 2 * mmToPx;
|
|
||||||
|
|
||||||
const rect = container.getBoundingClientRect();
|
|
||||||
const contentWidth = rect.width || container.scrollWidth;
|
|
||||||
const contentHeight = rect.height || container.scrollHeight;
|
|
||||||
|
|
||||||
const availableWidth = paperWidthPx - marginPx * 2;
|
|
||||||
const availableHeight = paperHeightPx - marginPx * 2;
|
|
||||||
|
|
||||||
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
|
|
||||||
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
|
|
||||||
|
|
||||||
this.printScale = Math.min(scaleX, scaleY, 1);
|
|
||||||
container.style.setProperty('--print-scale', this.printScale);
|
|
||||||
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
|
|
||||||
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetPrintScale() {
|
|
||||||
this.printScale = 1;
|
|
||||||
if (this.$el) {
|
|
||||||
this.$el.style.setProperty('--print-scale', 1);
|
|
||||||
this.$el.style.removeProperty('--paper-width');
|
|
||||||
this.$el.style.removeProperty('--paper-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -274,39 +216,4 @@ export default {
|
|||||||
.current-coil-no, .enter-coil-no {
|
.current-coil-no, .enter-coil-no {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
@page {
|
|
||||||
size: 100mm 80mm;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body>*:not(.label-container) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
transform: scale(var(--print-scale, 1)) !important;
|
|
||||||
transform-origin: top left !important;
|
|
||||||
max-width: var(--paper-width, 100mm) !important;
|
|
||||||
max-height: var(--paper-height, 80mm) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user