- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试使用打印 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> <button onclick="window.print();">Send to PDF</button></div>
body * {
visibility: hidden;
}
最佳答案
您需要使用实际的 div .final-results
在 CSS
/@media print{}
仅在 window.print()
中显示结果表单击 Print to PDF
时的命令
此外,您可以添加自定义 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> <button onclick="window.print();">Send to PDF</button></div>
关于javascript - 我只想打印来自 HTML/JS 页面的特定 div 内容和电子邮件结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63576038/
在电子邮件中 Received: header 可以合法地多次出现,并且具有互斥的值... Received: three.example.com Received: two.example.co
是否有任何代码/宏可以合并到我的 sas 程序中,一旦我的 sas 代码在运行时发生错误,它会立即给我发送电子邮件? 另外,这封电子邮件是否可能包含发生的错误? 最佳答案 是的……也不是…… 这是可能
我有一个包含三个 td 的表格,每个表格都需要包含图像。 td 的宽度和高度是固定的,但图像大小可以变化。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用 background-image 属
首先非常感谢大家过去提出的宝贵建议,我们正在创建一个应用程序,在某些事件中想要将电子邮件/短信发送到我们已经尝试过 openURL 调用的指定电话号码,但它会打开现有的内置iPhone 的电子邮件/短
我正在使用 apache commons mail 发送电子邮件。不幸的是,我遇到了以下异常: org.apache.commons.mail.EmailException: Sending the
我可以在我的 ~/.hgrc 文件中设置我常用的电子邮件地址,但是有没有办法为一个 hg 项目指定我想被称为不同的名称/电子邮件(类似到项目目录中的 git 的 .git/config 文件覆盖 ~/
$message = 'New user registration\n\n There is a new submission on the site and below are the detail
使用 outlook 我可以发送在邮件正文中插入图像的电子邮件(不是作为附件)。我如何使用 PHP 中的 mail() 函数来做到这一点? 最佳答案 我会推荐 Swift Mailer: http:/
以下代码的目标是将所选图表粘贴到我的文本下方的电子邮件正文中。但是,它继续将其粘贴在我的文本上方。我该如何更改它以使其粘贴在下面?谢谢! Set OutApp = CreateObject("Outl
首先,我知道不建议使用正则表达式发送电子邮件,但我必须对此进行测试。 我有这个正则表达式: \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b 在 Java 中,我这样
如何在没有任何第三方程序的情况下从 Python 发送电子邮件? 最佳答案 使用Python email和 smtplib模块。示例:http://docs.python.org/library/em
我目前正在使用此代码在 html 表中显示 mysql 记录 "; . . echo ' '. $row["Email1"] . ' '; . . echo ""; }
在电子邮件中使用 HTML 时,是否可以仅将链接的一部分着色为特定颜色? 我试过: red part of link normal part ...我知道如果我拆分链接是可能的,但我正在努力将它们保持
我正在处理一封 html 电子邮件,我有一个非常简单的元素 (ul),我想将它移到页面下方。 我检查了campaign monitor's guide并且不支持负边距,或者 position: abs
我使用表格创建了我的 HTML 电子邮件,该表格有一个背景图像,在大多数基于 Web 的电子邮件客户端中都能正常显示。 我正在努力让背景图片显示在 Outlook 中。 我最近的尝试,我尝试了以下操作
我对 PHP/CSS 和一般编程还很陌生。 我想改变文本区域中文本的格式,就像在这里所做的那样,例如,当为突出显示的文本添加标签“代码示例”时,它会缩进它,或者当将它设置为粗体时,它会加粗它。 这样做
嘿,你能推荐我哪些 C++ 库或类可用于在 C++ 中通过 SMTP 发送电子邮件。我在 Windows 平台上。我需要一个支持附件和 SSL 连接的库。有哪些可用选项。我不打算实现我自己的 :) 问
想知道是否可以在 HTML 电子邮件中包含一个表单。我要做的就是将图像输入提交到 Paypal 购买页面。我希望它直接进入 Paypal ,而无需先进入营销页面... 我会拥有 paypal 要求的完
我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知,以确保它的可移植性。 下面是代码,它在 Outlook 中看起来完全符合我的要求,但是一旦将内
我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/
我是一名优秀的程序员,十分优秀!