我只想打印來自 HTML/JS 頁面的特定 div 內容和電子郵件結果？

Question

我嘗試使用打印 JS/HTML 頁面，但它正在打印整個頁面。 我只想打印一個特定的 div 內容，在我的情況下它是結果。

代碼如下：

 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>

我在這個問題中遇到的問題已通過刪除解決

  body * {
    visibility: hidden;
  }

Answer 1

您需要在CSS / @media print{}使用實際的 div .final-results以在單擊Print to PDF時僅在window.print()命令中顯示結果表

此外，您可以根據需要將自定義CSS添加到PDF中

編輯：我已經加入querySelector方法添加innerText您的.final-results到div的href ，所以你可以利用它來進行emailing ，以及通過點擊send to Email

現場演示：

 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>