<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmltopic</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<style>
* {
margin: 0;
}
.test {
text-align: center;
line-height: 100px;
background-color: #87CEEB;
display: inline-block;
vertical-align: top;
}
canvas {
margin-right: 5px;
}
.down {
float: left;
margin: 40px 10px;
}
.down2 {
float: left;
margin: 40px 30px;
}
</style>
</head>
<body>
<div class="test">
<form action="" class="table">
<div class="header">
<div>学号</div>
<div>学院</div>
<div>专业</div>
<div>班级</div>
<div>年级</div>
<div>专/本</div>
<div>姓名</div>
<div>性别</div>
<div>个人联系电话</div>
<div>短号</div>
<div>家庭详细地址</div>
<div>家庭联系电话</div>
<div>资助手续办理情况描述</div>
<div>经办人</div>
<div>签名时间</div>
<div>确认签名</div>
<p class="cl"></p>
</div>
<div class="body">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<p class="cl"></p>
</div>
<div><a class="down" href="" download="downImg">下载</a>
</div>
<div><a class="down2" href="" download="downImg">下载2</a></div>
<script>
//直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
//html2canvas(document.querySelector('div')).then(function(canvas) {
// document.body.appendChild(canvas);
//});
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let
_canvas = document.querySelector('.test');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求,对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(2, 2);
html2canvas(document.querySelector('.test'), { canvas: canvas2 }).then(function(canvas) {
//document.body.appendChild(canvas);
//canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
</script>
<script language="javascript">
//这是另一种写法
$(function () {
$(".down2").click(function () {
html2canvas($(".test")).then(function (canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
window.location.href = imgUri; // 下载图片
});
//html2canvas($('.tongxingzheng_bg'), {
// onrendered: function (canvas) {
// var data = canvas.toDataURL("image/png");//生成的格式
// //data就是生成的base64码啦
// alert(data);
// }
//});
});
});
</script>
</body>
</html>
本文转自https://blog.csdn.net/huwei2003/article/details/79761580,原代码有些不完美,会出现将下载按钮移动至要下载的内容前时出现无法下载的情况,而上面是我自己修改后的代码,避免了这种情况的发生。