通过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>