js代码
<!--引入canvas -->
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<!-- qrcode.js -->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<!-- jquery -->
<script type="text/javascript" src="http://hti.cbcie.com/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//下载离职表
function saveimg() {
var date = new Date();
const canvasID = document.getElementById("tablecontent");
//选中.box类将该容器转为canvas
html2canvas(canvasID, {
scale: 16,
dpi:4000,
}).then(function (canvas) {
let dataURL = canvas.toDataURL("image/jpeg"); // 拿到数据流
var aLink = document.createElement("a"); // 创建一个a标签
var blob = base64ToBlob(dataURL);
var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, true);
aLink.download = '离职表' + date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
aLink.href = URL.createObjectURL(blob);
console.log(aLink.href)
aLink.click();
//document.body.appendChild(canvas); //像页面中添加转为canvas之后的元素
})
}
// base64转Blob对象
function base64ToBlob(code) {
var parts = code.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uint8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return new Blob([uint8Array], { type: contentType });
}
//初始化二维码
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100
});
//生成二维码的方法
function makeCode() {
var elText = document.getElementById("pageurl");
if (!elText.value) {
alert("请输入一个地址!");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
</script>
页面内容
<div id="tablecontent">
<div class="lzzmcss">
<%-- 二维码展示地址 --%>
<div id="qrcode" style="width: 100px; height: 100px; margin-top: -55px; float: left">
</div>
</div>
</div>
</div>
<div style="float: right" >
<input id="pageurl" type="text" style="width: 200px;"></input><br />
<button type="button" class="btnOrangeSmall" onclick="makeCode();">点击生成二维码</button>
<button type="button" class="btnOrangeSmall" onclick="saveimg()">保存为图片</button>
</div>
<%--也可使用此方法下载页面内容 --%>
<div id="dy" ><button style="" type="button" onclick="$('#dy').hide(); window.print();">打印</button></div>