我只想打印来自 HTML/JS 页面的特定 div 内容和电子邮件结果？

Question

I tried to use print JS/HTML page but it is printing whole page. I just want to print a specific div content, in my case it is result.

The code is as follows:

 function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') let section1Total = 0 let section2Total = 0 let section1Question = 0 let section2Question = 0 let finalResults = document.querySelector('.final-results') let result1 = '' let result2 = '' finalResults.innerHTML = '' //Section 1 section1.forEach(function(radio, index) { if (radio.checked) { section2Question++ section1Total += +radio.value } }) //Section 2 section2.forEach(function(radio, index) { if (radio.checked) { section1Question++ section2Total += +radio.value } }) //Final Results and validation if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '} document.getElementById("control").style.display = "block"; document.getElementById("toemail").href += document.getElementById("final-results").innerText; }

 @media print { #result, #result * { visibility: visible; } #result { position: absolute; left: 0; top: 0; } } table, table tr th, table tr td { border: 1px solid black; }

 <p> Select a radio button and click on Submit. </p> <div class="section-1"> <h2>Section 1</h2> question 1: <input type="radio" name="question1" value="1">1 <input type="radio" name="question1" value="2">2 <input type="radio" name="question1" value="3">3 <br> question 2: <input type="radio" name="question2" value="1">1 <input type="radio" name="question2" value="2">2 <input type="radio" name="question2" value="3">3 <br> question 3: <input type="radio" name="question3" value="1">1 <input type="radio" name="question3" value="2">2 <input type="radio" name="question3" value="3">3 </div> <div class="section-2"> <h2>Section 2</h2> question 1: <input type="radio" name="question4" value="1">1 <input type="radio" name="question4" value="2">2 <input type="radio" name="question4" value="3">3 <br> question 2: <input type="radio" name="question5" value="1">1 <input type="radio" name="question5" value="2">2 <input type="radio" name="question5" value="3">3 <br> question 3: <input type="radio" name="question6" value="1">1 <input type="radio" name="question6" value="2">2 <input type="radio" name="question6" value="3">3 <br> question 4: <input type="radio" name="question7" value="1">1 <input type="radio" name="question7" value="2">2 <input type="radio" name="question7" value="3">3 </div> <br> <div class="final-results"></div> <br> <button type="button" onclick="displayRadioValue()"> Submit </button> <div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

The problem I had in this question was resolved by removing

  body * {
    visibility: hidden;
  }

Answer 1

You need to use actual div .final-results in the CSS / @media print{} to show the results tables only in the window.print() command when you click on Print to PDF

Also, you can add the custom CSS to your PDF as your wish to

Edit: I have added querySelector method to add the innerText of your .final-results div in to href of so you can use that for emailing as well by clicking send to Email

Live Demo:

 function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') let section1Total = 0 let section2Total = 0 let section1Question = 0 let section2Question = 0 let finalResults = document.querySelector('.final-results') let result1 = '' let result2 = '' finalResults.innerHTML = '' //Section 1 section1.forEach(function(radio, index) { if (radio.checked) { section2Question++ section1Total += +radio.value } }) //Section 2 section2.forEach(function(radio, index) { if (radio.checked) { section1Question++ section2Total += +radio.value } }) //Final Results and validation if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) document.getElementById("control").style.display = "block"; document.getElementById("toemail").href += document.querySelector(".final-results").innerText; } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section ' } } function genTable(ques, total, section) { var result = "<b>Section " + section + ":</b><br>" var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>" result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>" return result }

 @media print { body * { visibility: hidden; } .final-results * { visibility: visible; } .final-results { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } table, table tr th, table tr td { border: 1px solid black; }

 <p> Select a radio button and click on Submit. </p> <div class="section-1"> <h2>Section 1</h2> question 1: <input type="radio" name="question1" value="1">1 <input type="radio" name="question1" value="2">2 <input type="radio" name="question1" value="3">3 <br> question 2: <input type="radio" name="question2" value="1">1 <input type="radio" name="question2" value="2">2 <input type="radio" name="question2" value="3">3 <br> question 3: <input type="radio" name="question3" value="1">1 <input type="radio" name="question3" value="2">2 <input type="radio" name="question3" value="3">3 </div> <div class="section-2"> <h2>Section 2</h2> question 1: <input type="radio" name="question4" value="1">1 <input type="radio" name="question4" value="2">2 <input type="radio" name="question4" value="3">3 <br> question 2: <input type="radio" name="question5" value="1">1 <input type="radio" name="question5" value="2">2 <input type="radio" name="question5" value="3">3 <br> question 3: <input type="radio" name="question6" value="1">1 <input type="radio" name="question6" value="2">2 <input type="radio" name="question6" value="3">3 <br> question 4: <input type="radio" name="question7" value="1">1 <input type="radio" name="question7" value="2">2 <input type="radio" name="question7" value="3">3 </div> <br> <div class="final-results"></div> <br> <button type="button" onclick="displayRadioValue()"> Submit </button> <div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>