21 lines
1.1 KiB
Vue
21 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
import { computed,onBeforeUnmount,onMounted,ref,watch } from 'vue'
|
||
const props=defineProps<{ html:string; layout?:'single'|'print' }>()
|
||
const container=ref<HTMLDivElement>(),scale=ref(.6)
|
||
let observer:ResizeObserver|undefined
|
||
const paperWidth=computed(()=>(props.layout==='print'?210:190)*96/25.4)
|
||
const paperHeight=computed(()=>(props.layout==='print'?297:140)*96/25.4)
|
||
function resize(){if(container.value)scale.value=Math.min((container.value.clientWidth-36)/paperWidth.value,1)}
|
||
onMounted(()=>{observer=new ResizeObserver(resize);if(container.value)observer.observe(container.value);resize()})
|
||
watch(()=>props.layout,resize)
|
||
onBeforeUnmount(()=>observer?.disconnect())
|
||
</script>
|
||
<template>
|
||
<div ref="container" class="preview-canvas">
|
||
<div v-if="html" class="paper-wrap" :style="{width:paperWidth*scale+'px',height:paperHeight*scale+'px'}">
|
||
<iframe title="收据打印预览" sandbox="" scrolling="no" :srcdoc="html" :style="{width:paperWidth+'px',height:paperHeight+'px',transform:'scale('+scale+')'}"></iframe>
|
||
</div>
|
||
<div v-else class="preview-placeholder">选择一条有效数据，查看收据预览</div>
|
||
</div>
|
||
</template>
|