当前位置：首页 > news >正文

通过iframe碎片实现web局部打印

news 来源：原创 2024/9/17 3:45:03

通过iframe碎片实现web局部打印

创建打印模板

首先，创建一个出货单的 HTML 模板，并用 CSS 进行样式设计。
tips:
1、直接通过iframe碎片拉起打印，会导致样式丢失，所以需要获取当前界面的样式。

${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}

2、通过浏览器拉起打印机打印会有一个延迟，如果直接执行 document.body.removeChild(iframe); 移除 iframe 碎片会导致打印机获取不到碎片的内容。所以需要对 removeChild() 进行延迟处理。

<template><div id="app"><button @click="printOrder">打印出货单</button><div id="printArea"><h1>出货单</h1><p>订单编号: {{ orderNumber }}</p><p>客户名称: {{ customerName }}</p><table><thead><tr><th>商品名称</th><th>数量</th><th>单价</th><th>总价</th></tr></thead><tbody><tr v-for="item in orderItems" :key="item.id"><td>{{ item.name }}</td><td>{{ item.quantity }}</td><td>{{ item.price }}</td><td>{{ item.total }}</td></tr></tbody></table><p>总计: {{ totalAmount }}</p></div></div>
</template><script>
export default {data() {return {orderNumber: '12345',customerName: '张三',orderItems: [{ id: 1, name: '商品1', quantity: 2, price: 100, total: 200 },{ id: 2, name: '商品2', quantity: 1, price: 200, total: 200 },],totalAmount: 400,};},methods: {printOrder() {const printContent = this.$refs.printArea.innerHTML;const iframe = document.createElement('iframe');iframe.style.position = 'absolute';iframe.style.width = '0px';iframe.style.height = '0px';iframe.style.border = 'none';document.body.appendChild(iframe);const iframeDoc = iframe.contentWindow.document;iframeDoc.open();iframeDoc.write(`<!DOCTYPE html><html><head><title>出货单</title>${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}<style>table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #000;padding: 8px;text-align: left;}</style></head><body>${printContent}</body></html>`);iframeDoc.close();iframe.contentWindow.focus();iframe.contentWindow.print();setTimeout(()=>{document.body.removeChild(iframe);},3000);},},
};
</script><style>
#printArea {width: 100%;padding: 20px;border: 1px solid #000;
}
table {width: 100%;border-collapse: collapse;
}
th, td {border: 1px solid #000;padding: 8px;text-align: left;
}
</style>