Javascript Firefox打印无法适应html
我在firefox浏览器中更改打印比例时再次遇到问题，我使用wbr将ID号分为三行，但不知何故，当我更改打印的值比例时，第三行将分开并移动到另一页，如下图所示，当您在firefox中运行下面的代码，并以打印预览a4大小打印它，并将自定义比例更改为97%时，您可以看到问题。是否有任何专家可以建议或给出我的问题的解决方案在firefox打印中没有想法提前感谢 打印预览 完整htmlJavascript Firefox打印无法适应html,javascript,html,css,printing,Javascript,Html,Css,Printing,我在firefox浏览器中更改打印比例时再次遇到问题，我使用wbr将ID号分为三行，但不知何故，当我更改打印的值比例时，第三行将分开并移动到另一页，如下图所示，当您在firefox中运行下面的代码，并以打印预览a4大小打印它，并将自定义比例更改为97%时，您可以看到问题。是否有任何专家可以建议或给出我的问题的解决方案在firefox打印中没有想法提前感谢 打印预览 完整html asfasf @媒体屏幕{ th:nth类型（1）， td:nth类型（1）{ 显示：无； } .noPrint{
asfasf
@媒体屏幕{
th:nth类型（1），
td:nth类型（1）{
显示：无；
}
.noPrint{}
.头衔{
显示：无；
}
.footer、.civility、.certificate、.number、.chief、.positions、.rev{
显示：无；
}
}
@媒体印刷品{
.不打印{
显示：无；
}
.title{}
.footer{}
}
.报告页{
前分页符：始终；
}
@页面{
尺寸：自动；
边距：25毫米；
}
身体
{
/*这会影响发送到打印机之前内容的边距*/
边际：0px；
}
印刷品
Hellooo
Offcce
协助
示例示例
无人认领的1.0和2.0
直辖市第2页
一页一页
不
身份证号码
名称
巴郎涯
性
部门
数量
签名/指纹
提交ID/日期和发布
收到日期
评论
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
PH-COVID-160201000-00009196
门多萨、阿尔贝托、博茨瓦纳
5000
总人数
<!DOCTYPE html>
<html>
<head>
<title>asfasf</title>
<style type="text/css">
@media screen {
th:nth-of-type(1),
td:nth-of-type(1) {
display: none;
}
.noPrint {}
.titles {
display: none;
}
.footer,.municipality,.certify,.numbers,.chief,.positions,.rev {
display: none;
}
}
@media print {
.noPrint {
display: none;
}
.title {}
.footer {}
}
.reportpage {
page-break-before: always;
}
@page{
size: auto;
margin: 25mm 25mm 25mm 25mm;
}
body
{
/* this affects the margin on the content before sending to printer */
margin: 0px;
}
</style>
</head>
<body>
<button class="btn btn-secondary round btn-min-width mr-1 mb-1" onclick="printDiv();">Print</button>
<section class="users-list-wrapper">
<div class="users-list-table">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
<table class="table" name="table" id="table">
<thead>
<th colspan="9">
<div class="titles"><h3>Hellooo <br style="line-height: 20%;"><span
class="header2"> oFFICCE</span></h3>
<span class="cash">ASSISTANCE</span><br>
<span class="social">EXAMPLE SAMPLE</span><br>
<span class="unclaim">UNCLAIMED 1.0 and 2.0 </span><br><br>
</div>
</th>
<tr><th colspan="4" style="text-align: left;"> <span
class="municipality">MUNICIPALITY OF Page2</span></th>
</tr>
<span>Page page page</span> </h1>
<tr class="heads">
<th class="heads">No</th>
<th width="10%">ID Number</th>
<th class="namess">Name</th>
<th width ="8%" class="heads">Barangay</th>
<th width ="3%" class="heads">Sex</th>
<th width ="20px;" class="heads">Sector</th>
<th class="heads">Amount</th>
<th class="thumb">Signature/Thumb Marks</th>
<th class="presented">ID Presented/ Date & Issuance</th>
<th class="heads">Date Received</th>
<th width="80px;" class="heads">Remarks</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>PH-COVID-160201000-00009196</td>
<td>MENDOZA, ALBERTO, BOTSACO</td>
<td></td>
<td></td>
<td ></td>
<td>5000</td>
<td></td>
<td class="lenss"></td>
<td class="report-content-cell"></td>
<td></td>
</tr>
</tbody>
</table>
<table name="table1" id="table1">
<tfoot style="display: none;">
<tr >
<th ><div class="footer"></div></th>
<th colspan="2"> <div class="footer">TOTAL NO. OF PERSONS </div> </th>
<th colspan="2" ><div class="numbers">200</div></th>
</tr>
<tr>
<th class="footer"></th>
<th colspan="2" class="footer"><div class="footer">TOTAL AMOUNT NEEDED
</div> </th>
<th colspan="2" > <div class="numbers">150</div></th>
</tr>
<tr>
<th></th>
<th colspan="3"><div class="certify">I hereby certify that each person whose
name appears on this payroll are entitled to cash assistance</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="5"><div class="certify">I certifiy on my official oath that I
have this day ____ of _______________________ pain in cash to each man whose name
appears on the payroll, the amount set opposite his/her name; he/she having
present himself/herseld, establish his identity and affixed his signature</div>
</th>
</tr>
<tr>
<th></th>
<th colspan="3"><div class="chief"> Mam</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="3"><div class="chief">Mam</div></th>
</tr>
<tr>
<th></th>
<th colspan="3"><div class="positions">POSITION</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="3"><div class="positions">POSITION/div></th>
</tr>
<tr>
<th></th>
<th><div class="rev">Reviewed by:</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="3"><div class="rev">Approved for payment:</div></th>
</tr>
<tr>
<th></th>
<th colspan="3"><div class="chief"> SIR SIR</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="3"><div class="chief">SIR SIR</div></th>
</tr>
<tr>
<th></th>
<th><div class="positions">POSITION</div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="3"><div class="positions">POSITION</div></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
<script type="text/javascript">
[...document.querySelectorAll("tbody tr td")].forEach(td => {
const text = td.textContent;
if (text.length > 20 && text.indexOf("-") != -1) td.innerHTML = text.replace(/-/g, "<wbr/>-")
});
function addReportPages() {
let lastCountry = "";
let table = document.getElementsByClassName("report-content")[0];
let rows = table.querySelectorAll("tr");
rows.forEach(function(row){
let thisCountry = row.cells[3].innerHTML;
if (lastCountry == "") {
lastCountry = thisCountry;
} else if (thisCountry != lastCountry) {
row.classList.add("reportpage");
lastCountry = thisCountry;
}
})
}
window.onload = addReportPages;
function printDiv() {
// Make footer visible on last page only
let tbl = document.getElementById('table');
let tbl1 = document.getElementById('table1');
let footer = tbl1.getElementsByTagName('tfoot')[0];
footer.style.display = 'table-row-group';
tbl1.removeChild(footer);
tbl1.appendChild(footer);
// Make header visible on first page only
let title = document.querySelector('.titles');
let newTitle = title.cloneNode(true);
newTitle.style.textAlign = "center";
newTitle.style.fontWeight = "bold";
tbl.prepend(newTitle);
title.remove();
var divToPrint = document.getElementById('table');
var divToPrint1 = document.getElementById('table1');
var htmlToPrint = '' +
'<style type="text/css">' +
'.titles {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'font-size: 14px;' +
'}' +
'.id_no {' +
'padding:1px;' +
'margin-right: 350px;' +
'}' +
'.reportpage {' +
'page-break-before: always;' +
'}' +
'.municipality {' +
'font-weight: 550;' +
'font-family:Calibri, san-serif;' +
'font-size: 14px;' +
'text-align: left;' +
'}' +
'.presented {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'width:105px;' +
'padding 5px;' +
'font-size: 14px;' +
'}' +
'.footer {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'text-align: right;' +
'font-size: 13px;' +
'}' +
'.numbers {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'text-align: left;' +
'font-size: 13px;' +
'}' +
'.certify {' +
'font-family:Calibri, san-serif;' +
'font-size: 13px;' +
'text-align: left;' +
'font-weight: normal;' +
'margin-top: 15px;' +
'}' +
'.chief {' +
'font-family:Calibri, san-serif;' +
'text-align: left;' +
'font-weight: 550;' +
'margin-top: 40px;' +
'font-size: 13px;' +
'}' +
'.positions {' +
'font-family:Calibri, san-serif;' +
'text-align: left;' +
'font-weight: normal;' +
'font-size: 13px;' +
'}' +
'.rev {' +
'font-family:Calibri, san-serif;' +
'text-align: left;' +
'font-weight: normal;' +
'margin-top: 30px;' +
'font-size: 13px;' +
'}' +
'table td,.heads {' +
'border:1px solid #000000;' +
'padding:5px;' +
'font-family:Calibri, san-serif;'+
'font-size: 14px;' +
'width: 300px;' +
'}' +
'.thumb {' +
'border:1px solid #000000;' +
'padding:5px;' +
'font-family:Calibri, san-serif;'+
'font-size: 14px;' +
'width: 600px;' +
'}' +
'.namess {' +
'border:1px solid #000000;' +
'padding:5px;' +
'font-family:Calibri, san-serif;'+
'font-size: 14px;' +
'width: 500px;' +
'}' +
'tbody tr {' +
'counter-increment: noElm;' +
'}' +
'.lenss {' +
'padding-left:80px;' +
'font-size: 13px;' +
'}' +
'td:nth-of-type(1):before {' +
'content: counter(noElm);' +
'}' +
'th:nth-of-type(1),td:nth-of-type(1) {' +
'display: table-cell;' +
'}' +
'table {' +
'border-collapse: collapse;' +
// 'width: 100%;' +
'}' +
'.cash {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'font-size: 14px;' +
'}' +
'.social {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'font-size: 14px;' +
'}' +
'.unclaim {' +
'font-family:Calibri, san-serif;' +
'font-weight: 550;' +
'font-size: 14px;' +
'}' +
'.header2 {' +
'font-family:Calibri, san-serif;' +
'font-weight:normal;' +
'font-size: 14px;' +
'.social {' +
'font-family:Calibri, san-serif;' +
'font-size: 13px;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
htmlToPrint += divToPrint1.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
}
</script>
</html>