Print multiple invoices in one click typeScript

February 8, 2023

I’m trying to print multiple custom HTML invoices in one click, like this:

I tried to implement it by this way, but it’s not correct cause it will show the dialog print several times:

printInvoices() {
    this.orders.forEach(order => {
      let content = `
      <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>
        @media print {
            .invoice {
                font-size: 11px !important;
                overflow: hidden !important
            }
        }
    </style>
</head>

<body>
—

</body>
      `;

      let newWindow = window.open("", "", "width=300,height=300");
      newWindow?.document.write(content);
      newWindow?.focus();
      newWindow?.print();
      newWindow?.close();
    });
  }

So, any advice please?

>Solution :

You can do that by rendering all your invoices in one page in blocks, then you use page-break-after: always; to force breaking these blocks to multiple pages

Example:

document.getElementById('printBtn').addEventListener('click', () => {
  window.print();
});

.pages {
  display: none;
}

@media print {
  #printBtn {
    display: none;
  }
  @page {
    margin: 0;
  }
  .pages {
    page-break-after: always;
    display: block;
  }
}

<div class="container">
  <div class="pages">
    <h1>One</h1>
  </div>
  <div class="pages">
    <h1>Two</h1>

  </div>
  <div class="pages">
    <h1>Three</h1>
  </div>
</div>

<button id="printBtn">Print me</button>

Having multiple window.print() means that it will open the print pop-up multiple times