在电商订单、线下收银等业务场景中，经常需要将网页中的特定区域内容打印为收据，同时支持导出PDF或直接输出到纸张，避免打印整个页面带来的冗余内容问题。通过JavaScript可以灵活控制打印范围，实现精准的区域打印功能。
核心实现思路
实现特定区域打印的核心是提取目标区域的HTML内容，将其放入新的打印窗口或iframe中，再通过浏览器的打印接口触发打印操作。如果需要导出PDF，可以结合第三方库将HTML内容转换为PDF格式。
基础特定区域打印实现
以下是最基础的指定区域打印代码，通过创建隐藏的iframe承载目标内容，触发打印后自动清理资源：
// 打印指定id的区域内容
function printSpecificArea(targetId) {
// 获取目标区域元素
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error('未找到目标打印区域');
return;
}
// 创建隐藏的iframe
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
// 获取iframe的文档对象
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 写入目标区域内容和基础样式
iframeDoc.open();
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
<title>打印收据</title>
<style>
body { margin: 0; padding: 20px; font-family: '微软雅黑', sans-serif; }
.receipt { width: 80mm; margin: 0 auto; } /* 适配小票宽度 */
.receipt-header { text-align: center; margin-bottom: 15px; }
.receipt-item { display: flex; justify-content: space-between; margin: 8px 0; }
.receipt-total { border-top: 1px dashed #000; padding-top: 10px; margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<div class="receipt">
${targetElement.innerHTML}
</div>
</body>
</html>
`);
iframeDoc.close();
// 等待内容加载完成后触发打印
iframe.onload = function() {
iframe.contentWindow.focus();
iframe.contentWindow.print();
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe);
}, 100);
};
}收据区域HTML结构示例
配合上述打印函数的收据区域结构如下，包含常见的收据信息字段：
<div id="receiptArea">
<div class="receipt-header">
<h3>XX商店购物收据</h3>
<p>订单号：202405001</p>
<p>打印时间：${new Date().toLocaleString()}</p>
</div>
<div class="receipt-body">
<div class="receipt-item">
<span>商品A</span>
<span>×2</span>
<span>30.00元</span>
</div>
<div class="receipt-item">
<span>商品B</span>
<span>×1</span>
<span>25.00元</span>
</div>
</div>
<div class="receipt-total">
<div class="receipt-item">
<span>合计</span>
<span>85.00元</span>
</div>
<div class="receipt-item">
<span>实收</span>
<span>100.00元</span>
</div>
<div class="receipt-item">
<span>找零</span>
<span>15.00元</span>
</div>
</div>
<div class="receipt-footer" style="text-align: center; margin-top: 20px;">
<p>谢谢惠顾，欢迎下次光临</p>
</div>
</div>
<button onclick="printSpecificArea('receiptArea')">打印收据</button>导出为PDF的实现
如果需要将收据导出为PDF文件，可以使用jsPDF库结合html2canvas将HTML内容转换为PDF，以下是实现代码：
// 需要提前引入jsPDF和html2canvas库
function exportReceiptToPDF(targetId) {
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error('未找到目标区域');
return;
}
// 将HTML转换为canvas
html2canvas(targetElement, {
scale: 2, // 提升清晰度
useCORS: true // 允许跨域图片
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait', // 纵向
unit: 'mm',
format: [80, canvas.height * 80 / canvas.width] // 适配小票宽度
});
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
// 保存PDF文件
pdf.save('收据_' + new Date().getTime() + '.pdf');
});
}常见问题处理
- 打印样式异常：可以在打印的HTML中单独写入打印专用样式，避免受原页面样式影响，比如设置固定的小票宽度、隐藏不必要的元素。
- 图片加载不全：如果目标区域包含图片，需要确保图片加载完成后再触发打印或导出操作，可以添加图片加载完成的判断逻辑。
- 跨域资源问题：导出PDF时如果包含跨域图片，需要配置html2canvas的useCORS为true，同时服务端需要允许跨域访问。
注意事项
使用window.print()方法触发打印时，会调用浏览器的原生打印弹窗，不同浏览器的打印预览样式可能存在差异，建议提前测试主流浏览器的打印效果。如果需要更精准的打印控制，可以结合服务端生成PDF后返回给前端下载，适配更复杂的打印需求。
JavaScript网页打印特定区域打印收据生成PDF导出修改时间：2026-06-05 18:24:31