Reputation: 608

Print a specific part of the page that containe checkbox using javascript

I'm trying to print and styling a specific part of the page that containe checkboxes and a text

I want to print also the tick sign if the user had already put the tick sign and also i want the the text be near the checkbox not under the check box

for that i made a specific stylesheet for print

.iwaainfosection .terms .bottom .inner-check ,
.iwaainfosection .needs .bottom .inner-check {
    display: flex;
    align-items: center;
    gap:15px;
    margin-bottom: 10px;
}

.iwaainfosection .terms .bottom .inner-check p,
.iwaainfosection .needs .bottom .inner-check p{
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

and i link it on the page like that

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

the html part that i want to print

  <div class="bottom" id="terms">
       <div class="inner-check">
        <input type="checkbox" value="ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي">
         <p>ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي</p>
       </div>
       <div class="inner-check">
       <input type="checkbox" value="ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمارأن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية">
       <p>أن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية</p>
      </div>
      <div class="inner-check">
      <input type="checkbox" value="ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل
    المملكة أو خارجه">
    <p>ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل
                                            المملكة أو خارجه</p>
     </div>
</div>
<button class="btn-print" onclick="printContent('terms')">Print</button>

javascript code

function printContent(el) {
    let restorpage = document.body.innerHTML;
    let printContent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = restorpage;
}

The problem is that the tick sign not appeat and the text is under the checkbox and not by his side like in the picture below

How can i solve this please?

Upvotes: 0

Answers (2)

Kristian

Reputation: 2505

About why the text is under checkbox, this happens because the <p> element have display type of block by default (in simple term, that means that it will be dropped to new line, for a more Comprehensive Explanation, see here)

Then, about why the checked (ticked) checkboxes being reset back to their 'unchecked' state after print button is clicked: this happens because your printing logic is:

read and store specific element's innerHTML into a variable
read and store the whole page to another variable (to be restored later)
write body with specific element's innerHTML
print the whole body

But here it falls short:

The state of checkboxes and the value of input boxes are NOT a part of the source HTML.

Source

So when you write body with specific element's innerHTML, the checked state is lost.

My way of working around this is to screenshot the page into a <canvas> element, then put them into a pdf and print the pdf. Converting to <canvas> is using html2canvas library, while printing pdf is using jsPDF library https://artskydj.github.io/jsPDF/docs/index.html (note that I'm not associated with those two library)

Note that I don't use stacksnippet because it would make a 'tainted' canvas (or cross-origin canvas) and would not work. To try it, you can copy paste them to an empty text file then rename it to example.html

Here's a working example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        .iwaainfosection .terms .bottom .inner-check ,
        .iwaainfosection .needs .bottom .inner-check {
            display: flex;
            align-items: center;
            gap:15px;
            margin-bottom: 10px;
        }

        .iwaainfosection .terms .bottom .inner-check p,
        .iwaainfosection .needs .bottom .inner-check p{
            color: #000;
            font-weight: 500;
            font-size: 16px;
        }

        p {
            display: inline-block;
        }
    </style>
    <script type="text/javascript"></script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
</head>
<body>
<div>
    This text should not be printed!
</div>
<div class="bottom" id="terms">
       <div class="inner-check">
        <input type="checkbox" value="ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي" class="checkbox" checkedproptemplate>
         <p>ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي</p>
       </div>
       <div class="inner-check">
       <input type="checkbox" value="ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمارأن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية" class="checkbox" checkedproptemplate>
       <p>أن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية</p>
      </div>
      <div class="inner-check">
      <input type="checkbox" value="ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل
    المملكة أو خارجه" class="checkbox" checkedproptemplate>
    <p>ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل
                                            المملكة أو خارجه</p>
     </div>
</div>
<button class="btn-print" onclick="screenshotDiv('#terms')">Print</button>
</body>

<script type="text/javascript">
function screenshotDiv(divName) {
    html2canvas(document.querySelector(divName)).then(canvas => {
        var base64_picture = canvas.toDataURL();
        console.log(base64_picture);
        
        var imgData = canvas.toDataURL("image/jpeg");
        window.canvas = canvas;
        console.log(canvas);
        var pdf = new jspdf.jsPDF();

        pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width/5, canvas.height/5);
        pdf.autoPrint();
        pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
    });
}
</script>

</html>

Upvotes: 1

Mohammed Osman

Reputation: 4246

First, you need to use input of type button to prevent page postback like this:

<input type="button" class="btn-print" onclick="printContent('terms')" value="Print" />

<button> makes page posts back which will make user changes lost.

Second, please check if your html changes or not when checking the checkbox on. As you need to filter your html according to the change in the html.

Upvotes: 0

Print a specific part of the page that containe checkbox using javascript

Answers (2)

Related Questions