TypeScript实现一键打印多份自定义HTML发票的问题求助

你当前的代码会循环每个订单就打开新窗口触发打印，所以每个订单都会弹出一次打印对话框，这显然不符合需求。要实现一键打印多份且只弹一次对话框，核心思路是把所有发票合并到同一个窗口，用CSS分页符让每个发票单独占一页，最后只触发一次打印操作。

修改后的代码示例：

printInvoices() {
    // 初始化统一的HTML框架
    let allContent = `
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <style>
            .invoice {
                font-size: 11px !important;
                overflow: hidden !important
            }
            /* 给每个发票容器添加强制分页符 */
            .invoice-page {
                page-break-after: always;
            }
            /* 最后一页不需要分页符，避免多出空白页 */
            .invoice-page:last-child {
                page-break-after: avoid;
            }
            @media print {
                /* 确保打印时分页规则生效 */
                .invoice-page {
                    page-break-after: always;
                }
                .invoice-page:last-child {
                    page-break-after: avoid;
                }
            }
        </style>
    </head>
    <body>
    `;

    // 循环拼接所有订单的发票内容
    this.orders.forEach(order => {
        // 替换为你实际的发票HTML结构，注意用invoice-page容器包裹
        const invoiceHtml = `
        <div class="invoice-page invoice">
            <h3>订单号: ${order.orderNumber}</h3>
            <p>客户: ${order.customerName}</p>
            <!-- 这里填充你的发票详情内容 -->
        </div>
        `;
        allContent += invoiceHtml;
    });

    // 闭合HTML标签
    allContent += `</body>`;

    // 打开统一窗口并处理打印
    const newWindow = window.open("", "", "width=800,height=600");
    if (newWindow) {
        newWindow.document.write(allContent);
        newWindow.document.close(); // 必须调用close确保内容完全渲染
        newWindow.focus();
        newWindow.print(); // 仅触发一次打印
        newWindow.close();
    }
}

关键注意点：

• 用invoice-page类配合page-break-after: always实现每个发票自动分页，浏览器打印时会将每个容器内容单独作为一页。
• 只创建一个新窗口，一次性写入所有发票内容，最后仅调用一次print()，因此只会弹出一次打印对话框。
• 调用document.close()是为了确保新窗口的HTML内容完全加载渲染，避免打印出现内容缺失的情况。

内容的提问来源于stack exchange，提问作者Owies AL omari