Generate several invoices with just a single click using TypeScript

Question

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example:

https://i.sstatic.net/hAQgv.png

Although I attempted to achieve this functionality using the following method, it appears to be incorrect as it prompts the print dialog multiple times:

printInvoices() {
    this.orders.forEach(order => {
      let content = `
      <head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b4b2f6669666562612763040c55010104063e">[email protected]</a>/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();
    });
  }

Any suggestions on how to accomplish this task more effectively?

javascript html css angular typescript

Answer 1

Answer №1

If you want to display all your invoices on one page in blocks, you can achieve this by using the CSS property page-break-after: always; to split these blocks into multiple pages.

Here's an 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>

Using multiple instances of window.print() will trigger the print dialog multiple times for each block created.

Answer 2

If you want to display all your invoices on one page in blocks, you can achieve this by using the CSS property page-break-after: always; to split these blocks into multiple pages.

Here's an 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>

Using multiple instances of window.print() will trigger the print dialog multiple times for each block created.

Answer 3

Answer №2

Chances are, the best way to tackle this issue is by combining several PDFs directly on the server and then printing the consolidated document in one go.

Answer 4

Chances are, the best way to tackle this issue is by combining several PDFs directly on the server and then printing the consolidated document in one go.

Generate several invoices with just a single click using TypeScript

Answer №1

Answer №2

Similar questions

yii2: Utilizing the power of dynamic calling in widgets

What are some methods for saving HTML form data locally?

Comparison of HTML's equivalent to LaTeX's label and ef functionality

Subscribe to a new Observable once the previous one completes

The utilization of rxjs' isStopped function is now considered

Encountering an error when using setState with React.createElement: invalid type provided

Styling a parent element when it is in focus using CSS3

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

How to automatically select the first item in a populated dropdown list using Vue JS

Implementing reCAPTCHA in Spring MVC with Ajax

Adjust the dimensions of the canvas without disrupting the existing artwork

Exploring a personalized approach to searching in DataTables

Using the RabbitMQ consume method in conjunction with the channel.ack function

Deciphering Google location data using JavaScript

Express JS redirect does not update the URL and fails to load static files

What is the best way to implement global error handling for NextJS API requests?

Node.js UDP broadcast to subnet not working properly in Linux

The 'isLoading' property is not found in the type 'UseMutationResult<AxiosResponse<any, any>, Error, void, unknown>'.ts(2339)

The initial child expands in width according to the content until it reaches the boundaries of the parent, triggering the

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?