英文:
Print multiple invoices in one click typeScript
问题
我正在尝试实现一键打印多个自定义HTML发票，就像这样：
我尝试通过以下方式来实现，但这并不正确，因为它会多次显示打印对话框：
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();
});
}
所以，请问有什么建议吗？
英文:
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?
答案1
得分: 2
你可以通过在一个页面中以块的形式呈现所有发票，然后使用page-break-after: always;来强制将这些块分页打印。
示例：
<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">打印</button>
在多次使用window.print()会多次打开打印弹出窗口。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById('printBtn').addEventListener('click', () => {
window.print();
});
<!-- language: lang-css -->
.pages {
display: none;
}
@media print {
#printBtn {
display: none;
}
@page {
margin: 0;
}
.pages {
page-break-after: always;
display: block;
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Having multiple window.print() means that it will open the print pop-up multiple times
答案2
得分: 1
可能的解决方案将是在服务器端合并多个PDF文件，然后一次性打印合并后的文件。
英文:
Probably, the solution will be to merge multiple PDFs on the server side and then print the merged file all at once.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论