<template>
<div>
<div class="print-actions">
<el-button @click="print('selector')">按选择器打印</el-button>
<el-button @click="print('element')">按元素打印</el-button>
</div>
<div :id="cardId" ref="card" class="print-card">
<h3>服务确认单</h3>
<p>编号：A001</p>
<p>服务：系统安装与使用培训</p>
<p class="no-print">此操作提示仅在页面显示，不会打印。</p>
</div>
<p role="status">{{ message }}</p>
</div>
</template>
<script setup>
import { onBeforeUnmount, ref, useId } from 'vue'
import { $Print } from '@smallwei/avue'
const cardId = 'print-' + useId()
const card = ref(null)
const message = ref('点击按钮打开浏览器打印界面')
let active = true
function update(text) { if (active) message.value = text }
function print(mode) {
try {
$Print(mode === 'selector' ? '#' + CSS.escape(cardId) : card.value, {
documentTitle: '服务确认单 A001',
noPrint: '.no-print',
onReady: () => update('打印内容已准备好'),
onAfterPrint: () => update('打印界面已关闭'),
onError: error => update('打印失败：' + error.message)
})
} catch (error) {
update('打印失败：' + error.message)
}
}
onBeforeUnmount(() => { active = false })
</script>
<style scoped>
.print-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.print-actions .el-button { margin-left: 0; }
.print-card { padding: 20px; margin-top: 16px; border: 1px solid var(--el-border-color); border-radius: 8px; }
</style>
