在Web开发中,打印功能往往是一个不可或缺的部分,尤其是对于需要生成发票、报告等文档的应用场景。本文将指导你如何在前端实现一个实用功能:使用JavaScript打印一系列图片,确保每张图片占据一页,且无需弹出额外的打印窗口。我们将结合原生JavaScript操作和CSS媒体查询来达成这一目标。
最终实现效果图效果图:
步骤一:构建打印内容
function handlePrint(pdfList) {
showLoading(); // 显示加载指示器
previewInvoicePngMoreHttp(JSON.stringify(pdfList))
.then(response => {
hideLoading(); // 隐藏加载指示器
if (response.code === "0000") {
// 构建打印内容
let htmlContent = buildPrintContent(response.data);
// 使用隐藏iframe进行打印
printWithIframe(htmlContent);
} else {
showError(response.msg); // 显示错误信息
}
})
.catch(error => {
hideLoading();
handleRequestError(error); // 处理请求错误
});
}
步骤二:生成打印HTML内容
接下来,定义buildPrintContent函数,它负责根据图片数据生成HTML字符串,确保每张图片被包裹在一个具有.invoice-page类的<div>中,以便于应用打印样式。
function buildPrintContent(images) {
let html = `
<html>
<head>
<meta charset="UTF-8">
<title>Invoice Print</title>
<style>
/* 这里可以添加更多全局打印样式 */
</style>
</head>
<body>
`;
images.forEach((imageData, index) => {
html += `
<div class="invoice-page">
<img src="data:image/png;base64,${imageData}" alt="Invoice Image ${index + 1}">
</div>
<!-- 添加分页符 -->
<div class="page-break"></div>
`;
});
html += '</body></html>';
return html;
}
步骤三:使用隐藏iframe打印
为了不在新窗口中打开打印预览,我们将使用一个隐藏的<iframe>来承载打印内容并触发打印操作。
function printWithIframe(content) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentDocument.open();
iframe.contentDocument.write(content);
iframe.contentDocument.close();
iframe.onload = function() {
iframe.contentWindow.focus();
iframe.contentWindow.print();
setTimeout(() => {
document.body.removeChild(iframe);
}, 500);
};
}
步骤四:添加CSS媒体查询以优化打印样式
在mounted生命周期钩子中(或页面加载时),添加一个CSS样式,确保每一页结束时自动分页。
mounted() {
const style = document.createElement('style');
style.innerHTML = `
@media print {
.page-break {
break-after: page;
}
}
`;
document.head.appendChild(style);
}