JavaScript 使用 CSS 樣式打印 div
[英]JavaScript print div with CSS-Style
問題描述
我有一個 WordPress 站點，我想在其中生成 PDF，為此，我創建了一個頁面，其中有一個 DIV，應該從中生成 PDF。 我使用此鏈接來提供幫助，但對我來說，它在按下按鈕后立即中斷。
如果我刪除以下行它可以工作，但是 PDF 不再是樣式。 （因為它在 WordPress 上，我有一個育兒風格和一個自定義 CSS 兩者都在functions.php中有效鏈接）
在 gif 中，您可以看到我首先嘗試打印頁面但它不起作用。 在第二個場景中，我再次打印並且它可以工作但沒有 CSS。
在第一個場景中，我有鏈接和超時，在第二個場景中我都注釋掉了。
（ https://im6.ezgif.com/tmp/ezgif-6-54e1daed3b61.gif ）
我的代碼：
function PrintElem() { var mywindow = window.open('', 'Offerte', 'height=297mm,width=210mm'); mywindow.document.write('<html><head><title></title>'); // mywindow.document.write('<link rel="stylesheet" href="./print.css" type="text/css">'); mywindow.document.write('</head><body>'); mywindow.document.write(document.getElementById('A4').innerHTML); mywindow.document.write('</body></html>'); mywindow.document.close(); mywindow.focus(); mywindow.print(); // setTimeout(function(){mywindow.print();},1000); mywindow.close(); return true; }
@media print {.A4 { width: 210mm; height:297mm; border: solid 1px black; left: 50% -105mm; }.pdfExport { margin: 25mm 25mm 25mm 20mm; /* border: solid 1px black; */ }.tableRechnung { border-collapse: collapse; border: solid 1px black; width: 100% } } @media screen {.A4 { width: 210mm; height:297mm; border: solid 1px black; left: 50% -105mm; }.pdfExport { margin: 25mm 25mm 25mm 20mm; /* border: solid 1px black; */ }.tableRechnung { border-collapse: collapse; border: solid 1px black; width: 100% } }
<div class="A4" id='A4'> <div class='pdfExport'> <div class='offerteLogo'> <img src="https://example.ch/wp-content/uploads/2021/01/Web-1920-–-17.png" alt="img" width="200px" height="auto"> </div> <div class='offerteAdresse'> <p> Peter Musterschreiner <br> Musterschreinerei AG <br> Landstrasse 30 <br> 4321 Musterdorf <br> <a href="tel:071 987 65 43">071 987 65 43</a><br> <a href="mailto:musterschreiner@schreinerei.ch">musterschreiner@schreinerei.ch</a><br> <a href="https://schreinerei.ch">https://schreinerei.ch</a> </p> </div> <div class='offerteTitel'> <h4>Offerte</h4><br> </div> <div class='offerteEinleitungsText'> <p> Sehr geehrte Damen und Herren<br> Vielen Dank für Ihre Anfrage, wir unterbreiten Ihnen gerne das gewünschte Angebot. Wir freuen uns auf Ihren Auftrag. </p> </div> <div class='offerteAuflistung'> <table class='tableRechnung'> <.-- <thead> --> <!-- <th> --> <td>Leistung</td> <td>Anzahl</td> <td>à</td> <td>Beitrag in CHF</td> <!-- </th> --> <!-- </thead> --> <tbody> </tbody> </table> </div> <div class='offerteAusleitungsText'> <p> Bei fragen sind wir gerne für Sie da.<br><br> Freundliche Grüsse <br> Peter Musterschreiner </p> </div> </div> </div> <button onClick='PrintElem()'>Drucken</button>
1 個解決方案
解決方案1
0 2021-01-30 21:41:00
When you open a blank window with window.open('', ... it will not be linked to your WP styles - all CSS you need in that window you need to link by hand with <link rel="stylesheet" type="text/css" href="..."/>寫在 window 中。
另一種無需打開新 window 即可打印 div 的方法是在 html 中添加如下內容：
<button class="printButton" onClick='window.print()'>Drucken</button>
<style>
@media print {
.printButton,
.CLASS-OR-OTHER-SELECTOR-TO-MATCH-YOUR-ORANGE-TOP-BAR,
.ANYTHING-ELSE-THAT-YOU-DONT-WANT-ON-YOUR-PRINTOUT {
display: none !important;
}
}
</style>
它將使您的按鈕打印當前頁面的樣式，僅修改 CSS 如該媒體打印中所述（隱藏的頂欄、打印按鈕或您想要隱藏的任何其他內容 - 只需根據您的需要修改/添加選擇器）
使用JavaScript更改CSS樣式顏色值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.