Я пытаюсь распечатать несколько пользовательских счетов в формате 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();
});
}
Итак, какой-нибудь совет, пожалуйста?
вы не можете программно настроить параметры в пользовательском интерфейсе браузера - после открытия диалогового окна пользователь может внести эти настройки
Вероятно, решение будет состоять в том, чтобы объединить несколько PDF-файлов на стороне сервера, а затем сразу распечатать объединенный файл.
Спасибо, дорогая, идея в том, что мне не нужно заходить на сервер, проблема была исправлена с помощью page-break-after: always;
Вы можете сделать это, отображая все свои счета на одной странице в блоках, а затем использовать 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 со строкой содержимого, но он не применяется к страницам внутри диалога.
Некоторые свойства CSS не применяются к медиа-печати, по крайней мере, для некоторых браузеров, поэтому вам может понадобиться что-то вроде расширений CSS webkit (например: -webkit-print-color-adjust
Я думаю, что вам не хватает кода, который зацикливается выше.