JS 使用 JavaScript 的屏幕截图 html2canvas
介绍
该脚本允许您直接在用户浏览器上截取网页或其部分内容的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确地反映真实情况，因为它不会制作实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。
该脚本遍历其加载页面的 DOM。它收集所有元素的信息，然后使用这些信息构建页面的表示。换句话说，它实际上并没有截取页面的屏幕截图，而是根据从 DOM 读取的属性构建页面的表示。
因此，它只能正确渲染它理解的属性，这意味着有许多 CSS 属性不起作用。
脚本使用的所有图像都需要驻留在同一源下 ，以便能够在没有代理帮助的情况下读取它们。同样，如果页面上有其他canvas 元素，这些元素已被跨源内容污染，它们将变得肮脏并且不再被 html2canvas 读取。
该脚本不会呈现插件内容，例如 Flash 或 Java 小程序。
HTML源代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://cs.lifeiai.com:88/aa/jquery-git.js"></script>
<script src="http://cs.lifeiai.com:88/CC/html2canvas.js" charset="utf-8"></script>
<title>李X - 28 - 小儿神经心理发育报告单 - 菏泽市第三人民医院</title>
<style>
body {
font-family: SimSun !important;
}
/*全局外包框*/
.enlb-body-div{
width: 100%;
max-width:790px;
height: auto;
color: #000;
position:relative;
margin:0px auto;
padding:0px 0px 0px 0px;
}
/*这里是评估报表展示样式*/
.enlb-body-div h1 {
width: 100%;
height: auto;
line-height: 1.1em;
font-size: 2.2em;
text-align: center;
}
.enlb-body-div h4 {
width: 100%;
height: auto;
line-height: 1.1em;
font-size: 1.5em;
text-align: center;
}
.enlb-body-table {
width: 100%;
}
.enlb-body-table tr td {
height: 1.5em;
line-height: 1.5em;
border: 1px solid #000000;
margin: 0px auto;
padding: 5px 0px 5px 0px;
font-size: 1em;
}
.footer-main {
width: 100%;
max-width: 790px;
height: auto;
color: #000;
position: relative;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
.footer-main p {
text-align:right;
line-height:1.5em;
height:1.5em;
font-size:1.2em;
}
</style>
</head>
<body>
<div class="footer-main"><a href="javascript:test()" onclick="test()">捕获图像</a></div>
<div class="enlb-body-div" id="enlb-body-div">
<h1>菏泽市XX医院</h1>
<h4>《0～6岁小儿神经心理发育检查表》报告单</h4>
<table border="1" cellspacing="0" cellpadding="2" class="enlb-body-table">
<tr>
<td valign="middle" align="center">
姓名
</td>
<td valign="middle" align="center">李X</td>
<td valign="middle" align="center">
出生日期
</td>
<td valign="middle" align="center">2020-12-20 上午12:00:00</td>
<td valign="middle" rowspan="3" colspan="1" align="center">
早产年龄无需矫正
</td>
</tr>
<tr>
<td valign="middle" align="center">
性别
</td>
<td valign="middle" align="center">男</td>
<td valign="middle" align="center">
检查日期
</td>
<td valign="middle" align="center">2023-12-28 下午10:51:48</td>
</tr>
<tr>
<td valign="middle" align="center">
地址
</td>
<td valign="middle" align="center">
菏泽
</td>
<td valign="middle" align="center">
生理年龄
</td>
<td valign="middle" align="center">36.29</td>
</tr>
<tr>
<td valign="middle" rowspan="1" colspan="5" align="center">
检查记录
</td>
</tr>
<tr>
<td valign="middle" align="center">
项目
</td>
<td valign="middle" align="center">
实际得分
</td>
<td valign="middle" align="center">
智龄（MA）
</td>
<td valign="middle" align="center">
结果（DQ）
</td>
<td valign="middle" align="center">
总体评价
</td>
</tr>
<tr>
<td valign="middle" align="center">
大运动
</td>
<td valign="middle" align="center">33.00</td>
<td valign="middle" rowspan="5" colspan="1" align="center">33.00</td>
<td valign="middle" rowspan="5" colspan="1" align="center">90.92</td>
<td valign="middle" align="center">
优秀≥ 130
</td>
</tr>
<tr>
<td valign="middle" align="center">
精细动作
</td>
<td valign="middle" align="center">33.00</td>
<td valign="middle" align="center">
良好 110-129
</td>
</tr>
<tr>
<td valign="middle" align="center">
适应能力
</td>
<td valign="middle" align="center">33.00</td>
<td valign="middle" align="center">
中等80-109
</td>
</tr>
<tr>
<td valign="middle" align="center">
语言
</td>
<td valign="middle" align="center">33.00</td>
<td valign="middle" align="center">
临界偏低 70-79
</td>
</tr>
<tr>
<td valign="middle" align="center">
社会行为
</td>
<td valign="middle" align="center">33.00</td>
<td valign="middle" align="center">
智力发育障碍≤69
</td>
</tr>
<tr>
<td valign="middle" colspan="1" rowspan="1" align="center">
行为观察
</td>
<td valign="middle" colspan="2" rowspan="1" align="left" style="">
<p style="padding-left:20px">
肢体与协调：中等
</p>
<p style="padding-left:20px">
合作配合：中等
</p>
<p style="padding-left:20px">
语言沟通：中等
</p>
<p style="padding-left:20px">
听从与交流：中等
</p>
</td>
<td valign="middle" colspan="1" rowspan="1" align="center">
其他检查
</td>
<td valign="middle" colspan="1" rowspan="1" align="center">
无
</td>
</tr>
<tr>
<td valign="middle" colspan="1" rowspan="1" align="center">
建议
</td>
<td colspan="4" valign="middle" align="left" rowspan="1">
<p style="padding-left:20px">1、定期门诊随诊；2、每一年测评一次</p>
</td>
</tr>
</table>
<div class="footer-main">
<p>
<span style="width:33.333%; float:left; height:1em; text-align:center">测 试 者： 李X</span>
<span style="width:33.333%; float:left; height:1em; text-align:center">医生签字：史XX</span>
<span style="width:33.333%; float:left; height:1em; text-align:center">2023 年 12 月 29 日</span>
<span style="clear:both;"></span>
</p>
<br/>
</div>
</div>
<script>
function test() {
html2canvas(document.querySelector("#enlb-body-div")).then(canvas => {
document.body.appendChild(canvas)
});
}
</script>
</body>
</html>捕获代码
<script>
function test() {
html2canvas(document.querySelector("#enlb-body-div")).then(canvas => {
document.body.appendChild(canvas)
});
}
</script>浏览器兼容性
该库应该可以在以下浏览器上正常工作（带有Promisepolyfill）：
火狐浏览器 3.5+
谷歌浏览器
Opera 12+
IE9+
Edge
Safari 6+
您阅读本篇文章共花了： 