css打印查询在firefox中不起作用

css print query not working in firefox

本文关键字：不起作用 firefox 打印 查询 css      更新时间：2023-09-26

这是我的代码，它在chrome浏览器中打印时运行良好，但在firefox中不支持css，所以很多项目都隐藏在打印区域中

function printDiv(divName) {
  
            var divElements = document.getElementById(divName).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;
            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body> <div style='width: 21cm; margin:0 auto;'>" + 
              divElements + "</div></body>";
            //Print Page
            window.print();
            //Restore orignal HTML
            document.body.innerHTML = oldPage;
}
.print-button {
    width: 120px;
    height: 30px;
    background: #1abc9c;
    color: #FFFFFF;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    float: right;
}
.print-header, .print-footer {
  display: none;
}
@media print { 
 /* All your print styles go here */
 .print-header, .print-footer {
  display: inherit;
 }
 .print-footer {
    float: left;
    width: 100%;
    padding-top: 20%;
}
.pfooter {
    float: right;
    /* padding-top: 6%; */
    border-top: 1px solid black;
}
 .print-middle {
    float: left;
    width: 100%;
}
.ptable-header {
    float: left;
    padding-top: 4%;
    width: 100%;
}
.printHead {
    text-align: center;
    margin: 0 auto;
}
.psection {
    width: 25%;
    float: left;
}
.print-logo {
    float: left;
    width: 80px;
}
.print-logo img {
    width: 78px;
}
.report-date {
    float: right;
}
.psub {
    width: 40%;
}
.punit {
    width: 11%;
}
.pdes {
    width: 21%;
}
.pyear {
    width: 11%;
}
.ptotal {
    width: 12%;
}
}
<div id="list_table">
	        <h2>Total project found: 2 <input class="print-button" type="button" onclick="printDiv('printableArea')" value="Print"> </h2>
		<div id="printableArea">
			<div class="print-header">
				<div class="printHead">
				    <h2 class="ptitle">
				    দুর্যোগ ব্যাবস্থাপনা ও ত্রান মন্ত্রনালয়
				    </h2>  
				    <h3>
				      কাজের বিনিময়ে খাদ্য প্রকল্প
				     </h3>
				</div>
				<div class="print-middle">
				    <div class="print-logo">
					    <img src="http://192.185.183.190/~ssnp/spmis/images/logo.png">
					</div>
				    <div class="report-date">
				  
				    					    প্রতিবেদনের তারিখঃ (২০১৬-০১-০৫) 
				    </div>
				</div>
			  	<div class="ptable-header">
				  					          <div class="psection">
				            <span>বিভাগঃ</span>
		                           বরিশাল				          </div>
				    							  <div class="psection">
									<span>জেলাঃ</span>
		                                                         ভোলা				          </div>
				    					          <div class="psection">
				          				          
									<span>উপজেলাঃ</span>
		                                                মনপুরা				          </div>
				    					          <div class="psection">
									<span>ইউনিয়নঃ</span>
			                                   	সাকুচিয়া	
				          </div>
				          
			  
			  	</div>
			</div>
	 
	        <table>
				<thead>
					<tr><th>ক্রমিক নং</th>
					<th class="psub">প্রকল্পের ধরন</th>
					<th class="punit">সংখ্যা</th>
                    <th class="punit">একক</th>
					<!--<th>দৈর্ঘ্য</th>
					<th>প্রস্থ</th>
					<th>উচ্চতা/গভীরতা </th>
					<th>ক্ষেত্রফল</th>
					<th>অন্যান্য</th>		-->
					<th class="ptotal">বরাদ্দের পরিমাণ</th>
					<th class="ptotal">ব্যয়ের পরিমাণ</th>
					<th class="pyear">অগ্রগতীর হার %</th>	
				
				</tr></thead>
								<tbody><tr>
					<td>1</td>
					<td class="pdes">
	                                     রাস্তা নির্মাণ	                                                        </td>
					<td class="psub">1</td>
                    <td class="punit">55555</td>
					<!--<td></td>
					<td></td>
					<td></td>
					<td></td>		
					<td></td> -->
					<td class="ptotal">25.00</td>
					<td class="ptotal">25.00</td>
					<td class="pyear">						                100
					</td>
					
				</tr>
								<tr>
					<td>2</td>
					<td class="pdes">
	                                     রাস্তা পুনর্নিমাণ	                                                        </td>
					<td class="psub">16</td>
                    <td class="punit">55555</td>
					<!--<td></td>
					<td></td>
					<td></td>
					<td></td>		
					<td></td> -->
					<td class="ptotal">292.00</td>
					<td class="ptotal">292.00</td>
					<td class="pyear">						                100
					</td>
					
				</tr>
					                          <tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>মোটঃ 317</td>
					<td>মোটঃ 317</td>
					
					<td></td>
				</tr>
			</tbody></table>
			<div class="print-footer">
	            <div class="footer-amount">
					<!-- <h3>
					মোট বরাদ্দের পরিমাণঃ
									    </h3>
				    <h3>
					মোট ব্যয়ের পরিমাণঃ
										<h3> -->
				</div>
				 <div class="pfooter">
				 	অনুমোদনকারীর স্বাক্ষর, সীল ও তারিখ 
				 </div>
			</div>
	    </div>
        </div>

您必须使用！对于@media print非常重要。希望对你有用。

@media print在Firefox中得到支持，因为版本3.5。

您可以尝试以旧的方式添加打印css：

<link href="/print.css" rel="stylesheet" media="print" type="text/css" />

在引用CSS时是否使用media="screen"规定？如果是这样，您可以完全删除它并使用以下方法：

<link href="/styles.css" rel="stylesheet" type="text/css" />

我解决了我的问题。在我的JS中，我使用了新的html代码，那里的头与我的主站点不同。我在标题部分添加了css链接，然后解决了我的问题。像这个

printDivCSS = new String ('<link href="../css/print.css" rel="stylesheet" type="text/css">');
function printDiv(divName) {
 var originalContents = document.body.innerHTML;
 document.body.innerHTML = printContents;
 window.open('', '_blank', 'width=800,height=auto');
 document.body.innerHTML = originalContents;*/
 var divElements = document.getElementById(divName).innerHTML;
 var oldPage = document.body.innerHTML;
 //Reset the page's HTML with div's HTML only
 document.body.innerHTML = 
          "<html><head>" + 
          printDivCSS + "<title></title></head><body class='printarea'> <div style='width: 21cm; margin:0 auto;'>" + 
          divElements + "</div></body>";
        //Print Page
        window.print();
        //Restore orignal HTML
        document.body.innerHTML = oldPage;
 }
相关文章：