Печать нескольких счетов в один клик typeScript

Я пытаюсь распечатать несколько пользовательских счетов в формате HTML одним щелчком мыши, например:

Я пытался реализовать это таким образом, но это неправильно, потому что диалоговое окно будет отображаться несколько раз:

printInvoices() {
    this.orders.forEach(order => {
      let content = `
      <head>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/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();
    });
  }

Итак, какой-нибудь совет, пожалуйста?

Я думаю, что вам не хватает кода, который зацикливается выше.

Keith 08.02.2023 09:17

вы не можете программно настроить параметры в пользовательском интерфейсе браузера - после открытия диалогового окна пользователь может внести эти настройки

Professor Abronsius 08.02.2023 09:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
72
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вероятно, решение будет состоять в том, чтобы объединить несколько PDF-файлов на стороне сервера, а затем сразу распечатать объединенный файл.

Спасибо, дорогая, идея в том, что мне не нужно заходить на сервер, проблема была исправлена ​​с помощью page-break-after: always;

Owies AL omari 08.02.2023 09:42
Ответ принят как подходящий

Вы можете сделать это, отображая все свои счета на одной странице в блоках, а затем использовать page-break-after: always;, чтобы принудительно разбить эти блоки на несколько страниц.

Пример:

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>

Наличие нескольких window.print() означает, что всплывающее окно печати будет открываться несколько раз.

Да, работает отлично, спасибо, дорогая! Нет, у меня проблема со стилем, содержимое страниц динамическое, я добавил стиль css со строкой содержимого, но он не применяется к страницам внутри диалога.

Owies AL omari 08.02.2023 09:40

Некоторые свойства CSS не применяются к медиа-печати, по крайней мере, для некоторых браузеров, поэтому вам может понадобиться что-то вроде расширений CSS webkit (например: -webkit-print-color-adjust

Fcmam5 08.02.2023 09:49

Другие вопросы по теме