瀏覽器的print方法直接調用會打印當前頁面的所有元素，使用iframe可以實現局部打印所需要的模塊。

組件printView，將傳入的信息放入iframe中，調用瀏覽器的打印功能

<template><div class="print"><iframeid="iframe"style="display: none; width: 100%"frameborder="0"></iframe></div>
</template>
<script>
export default {name: 'printView',methods: {setBodyHtml(html) {const document = window.documentconst iframe = window.frames[0]iframe.document.head.innerHTML = document.head.innerHTML // 獲取當前文檔的頭部給iframeiframe.document.body.innerHTML = html // 把傳過來的html給iframe頭部iframe.document.body.style.background = '#fff'let arr = document.getElementsByTagName('tr')let heightNum = 0let onePage = 800 //第一頁的高度for (let i in arr) {heightNum += arr[i].offsetHeightif (heightNum > onePage) {heightNum = arr[i].offsetHeightonePage = 1500 //第二頁高度}}iframe.window.print()}}
}
</script>

<div v-if="detail.work_order_id" class="before" id="print_info">

? ? ? ? <work-order-detail :detail="detail"></work-order-detail>

</div>

// 打印

const viewRef = ref(null)

const print = () => {

? const html = document.getElementById('print_info').innerHTML

? viewRef.value.setBodyHtml(html)

}