导入js文件 html2canvas.js:
<script src="${pageContext.request.contextPath}/js/html2canvas/build/html2canvas.js" type="text/javascript"></script>
jquery 语句(旧版本):
$(document).on('click','#printBtn',funct
var flag=false;
$("#printTabId tbody > tr").each(function(){
flag=true;
});
if(!flag){
bootbox.alert("无内容打印!");
return false;
}
var now=getNowFormatDate(); //自己写的获取时间方法
var title=$("#companyNameId").val();
html2canvas($("#printTabId"), {
onrendered: function (canvas) {
var ctx = canvas.getContext('2d');
var url = canvas.toDataURL("image/jpeg", 1.0);
var image = new Image();
image.src = url;
var triggerDownload = $("<a>").attr("href", url).attr("download", title+now+".png").appendTo("body");
triggerDownload[0].click();
},
useCORS:true});
});
//获取现在日期
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate
}
#printTabId 是我指定要打印成图片的div的id
jquery 语句(新版本):
function printPhoto(tab){
html2canvas(document.querySelector("#"+tab)).then(canvas => {
// 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
// 加工image data,替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');
//console.log(imgData);
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
// 下载后的文件名
var filename = 'XXXXXX'+ '.' + type;
// download
saveFile(imgData,filename);
});
}
tab 是我指定要打印成图片的div的id