html 调用div进行打印时未加载CSS

h22fl7wq 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(185)

我想打印一个div，但是当我调用它的时候，CSS不适用。我从here得到了JS。它应该只打印表格，它做到了，但是它不适用表格的样式，最后它没有格式化。
Expected result
Actual result
这是我的代码：
超文本：

<div id="printableArea">
                <h3 class="table-heading" contenteditable="true">My PC Setup</h3>
                <table spellcheck="false">
                    <tr>
                        <!--https://pcbuilder.net/rigs/aK6rMH/-->
                        <th>Part</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Notes</th>
                    </tr>
                    <tr>
                        <td>Processor</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">AMD Ryzen 9
                            7950X
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            747</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">
                            32-Thread<br>16-Core<br>4.5GHz</td>
                    </tr>
                    <tr>
                        <td>Motherboard</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">GIGABYTE X670E
                            AORme
                            Master</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            542.84</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Socket:
                            AM5<br>RAM
                            Slots: 4<br>Chipset: AMD X670E</td>
                    </tr>
                    <tr>
                        <td>CPU Cooler</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Cooler Master
                            Hyper
                            212 EVO V2</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            90</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Side Panel:
                            Tempered
                            Glass, Steel<br>Cabinet Type: ATX Full Tower</td>
                    </tr>
                    <tr>
                    <tr>
                        <td>Case</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">NZXT H510 -
                            CA-H510B-B1</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            1,584.90</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Memory:
                            24GB<br>Chipset: GeForce RTX 3090 Ti<br>Interface: PCIe 4.0 x16</td>
                    </tr>
                    <tr>
                        <td>Graphics card</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Nvidia RTX
                            3090 TI
                            Founders Edition</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            51.44</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan Speed:
                            650RPM-1800RPM<br>Noise Level: 8-27dBA</td>
                    </tr>
                    <tr>
                        <td>RAM</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">G.Skill
                            Trident Z5
                            RGB
                            Series 32GB 2 x 16GB (x2)</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            564.42</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">RAM Size:
                            64GB<br>RAM
                            Type: DDR5</td>
                    </tr>
                    <tr>
                        <td>Storage (SSD)</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Samsung EVO
                            970
                            1TB
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            167.99</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 1
                            TB<br>Type: SSD<br>Cache Memory: 1024 MB</td>
                    </tr>
                    <tr>
                        <td>Storage (HDD)</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Seagate
                            BarraCuda
                            2TB
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            53.49</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 2
                            TB<br>Type: HDD<br>RPM: 7200 RPM<br>Interface: SATA 6 Gb/s<br>Cache Memory: 256 MB</td>
                    </tr>
                    <tr>
                        <td>Case Cooler</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">ARCTIC P12
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            5.73</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan RPM: 1800
                            RPM<br>Airflow: 56.3 CFM<br>Noise Level: N/A</td>
                    </tr>
                    <tr>
                        <td>Power Supply</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Thermaltake
                            Smart
                            430W
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            98.95</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Power:
                            430W<br>Efficiency: 80+</td>
                    </tr>
                    <tr>
                        <td>Monitor</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Acer SB220Q Bi
                            21.5
                        </td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            170</td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Screen Size:
                            21.5"<br>Response Time: 4ms<br>Resolution: 1920 x 1080<br>Refresh Rate: 75 Hz</td>
                    </tr>
                    <tr>
                        <td class="total1"><b>Total</b></td>
                        <td class="total1"></td>
                        <td class="total1"></td>
                        <td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
                            <b>4,077</b>
                        </td>
                    </tr>
                </table>
            </div>
            <br>
            <input type="button" onclick="printDiv('printableArea')" value="Print your setup" />

JavaScript语言：

function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
}

CSS：

.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}

td,
th {
border: 1px solid black;
padding: 10px 20px;
}

th {
font-size: 20px;
}

td {
font-size: 15px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

.total1 {
border: none;
}

.pc-border-title {
text-align: center;
}

.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}

.pcbuilder-link {
color: #cecece;
}

.pcbuilder-link:hover {
color: #adadad;
}

.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}

\#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}

.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}

td,
th {
border: 1px solid black;
padding: 10px 20px;
}

th {
font-size: 20px;
}

td {
font-size: 15px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

.total1 {
border: none;
}

.pc-border-title {
text-align: center;
}

.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}

.pcbuilder-link {
color: #cecece;
}

.pcbuilder-link:hover {
color: #adadad;
}

.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}

\#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}

我该怎么做？谢谢

Html

来源：https://stackoverflow.com/questions/74818746/css-not-loading-when-i-call-a-div-to-print

1条答案

按热度按时间

krugob8w1#

我在使用类似的javascript函数打印表格时遇到了类似的问题。你必须提供所有的css到打印窗口。我在这里粘贴我的代码。你将不得不修改以适应你的要求。

function PrintElem(elem)
    {
        var orgPrint = document.getElementById(elem).innerHTML;
        document.querySelectorAll(".no-print").forEach(el => el.remove()); // removes some elements from the table that are not to be pronted
        var toPrint = document.getElementById(elem).innerHTML;
        var mywindow = window.open('', 'PRINT', 'height=400,width=600');

        mywindow.document.write('<html><head><title>My Title</title>');
        mywindow.document.write('<style>');
        mywindow.document.write('* { font-family: Roboto, \'Segoe UI\', Tahoma, sans-serif; }');
        mywindow.document.write('#invTable { border-collapse: collapse; width: 100%; }');
        mywindow.document.write('#invTable td, #invTable th { border: 1px solid #ddd; padding: 8px; }');
        mywindow.document.write('.text-end { text-align: right !important; }');
        mywindow.document.write('.text-center {text-align: center !important; }');
        mywindow.document.write('body {    display: flex;    flex-direction: column;}');
        mywindow.document.write('.print-footer { margin-top: auto; position:fixed; bottom:0;text-align: center; width:100%; border-top: 1px solid #ddd; }');
        mywindow.document.write('</style>');

        mywindow.document.write('</head><body >');
        mywindow.document.write('<br/><br/><br/>');
        mywindow.document.write(toPrint);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print();
        mywindow.close();
        
        document.getElementById(elem).innerHTML = orgPrint; // restores the table as is 

        return true;
    }

赞(0）回复(0）举报 2022-12-16

我来回答

html 调用div进行打印时未加载CSS

1条答案

相关问题

热门标签

最新问答