打印多张发票只需一次点击 TypeScript

huangapple
go评论240阅读模式
英文:

Print multiple invoices in one click typeScript

问题

我正在尝试实现一键打印多个自定义HTML发票，就像这样：

打印多张发票只需一次点击 TypeScript

我尝试通过以下方式来实现，但这并不正确，因为它会多次显示打印对话框：

  1. printInvoices() {
  2.     this.orders.forEach(order => {
  3.         let content = `
  4.         <head>
  5.         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
  6.             integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  7.         <style>
  8.             @media print {
  9.                 .invoice {
  10.                     font-size: 11px !important;
  11.                     overflow: hidden !important
  12.                 }
  13.             }
  14.         </style>
  15.         </head>
  17.         <body>
  18.         —
  20.         </body>
  21.         `;
  23.         let newWindow = window.open("", "", "width=300,height=300");
  24.         newWindow?.document.write(content);
  25.         newWindow?.focus();
  26.         newWindow?.print();
  27.         newWindow?.close();
  28.     });
  29. }

所以，请问有什么建议吗？

英文:

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

打印多张发票只需一次点击 TypeScript

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

  1. printInvoices() {
  2.     this.orders.forEach(order =&gt; {
  3.       let content = `
  4.       &lt;head&gt;
  5.     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
  6.         integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
  7.     &lt;style&gt;
  8.         @media print {
  9.             .invoice {
  10.                 font-size: 11px !important;
  11.                 overflow: hidden !important
  12.             }
  13.         }
  14.     &lt;/style&gt;
  15. &lt;/head&gt;
  17. &lt;body&gt;
  18. —
  20. &lt;/body&gt;
  21.       `;
  23.       let newWindow = window.open(&quot;&quot;, &quot;&quot;, &quot;width=300,height=300&quot;);
  24.       newWindow?.document.write(content);
  25.       newWindow?.focus();
  26.       newWindow?.print();
  27.       newWindow?.close();
  28.     });
  29.   }

So, any advice please?

答案1

得分: 2

你可以通过在一个页面中以块的形式呈现所有发票，然后使用page-break-after: always;来强制将这些块分页打印。

示例：

  1. <div class="container">
  2.   <div class="pages">
  3.     <h1>One</h1>
  4.   </div>
  5.   <div class="pages">
  6.     <h1>Two</h1>
  7.   </div>
  8.   <div class="pages">
  9.     <h1>Three</h1>
  10.   </div>
  11. </div>
  12. <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 -->

  1. document.getElementById(&#39;printBtn&#39;).addEventListener(&#39;click&#39;, () =&gt; {
  2.   window.print();
  3. });

<!-- language: lang-css -->

  1. .pages {
  2.   display: none;
  3. }
  5. @media print {
  6.   #printBtn {
  7.     display: none;
  8.   }
  9.   @page {
  10.     margin: 0;
  11.   }
  12.   .pages {
  13.     page-break-after: always;
  14.     display: block;
  15.   }
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;pages&quot;&gt;
  3.     &lt;h1&gt;One&lt;/h1&gt;
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;pages&quot;&gt;
  6.     &lt;h1&gt;Two&lt;/h1&gt;
  8.   &lt;/div&gt;
  9.   &lt;div class=&quot;pages&quot;&gt;
  10.     &lt;h1&gt;Three&lt;/h1&gt;
  11.   &lt;/div&gt;
  12. &lt;/div&gt;
  14. &lt;button id=&quot;printBtn&quot;&gt;Print me&lt;/button&gt;

<!-- 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.

huangapple
  • 本文由 发表于 2023年2月8日 16:07:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/75382845.html
  • angular
  • css
  • html
  • javascript
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定