1、首先引入html2canvas.min.js, 官网地址:http://html2canvas.hertzen.com/
2、开干
var dataURIToBlob = function (imgName, dataURI, callback) {var binStr = atob(dataURI.split(',')[1]),len = binStr.length,arr = new Uint8Array(len);for (var i = 0; i < len; i++) {arr[i] = binStr.charCodeAt(i);}callback(imgName, new Blob([arr]));}var callback = function (imgName, blob) {var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {if (navigator.msSaveBlob) {return navigator.msSaveBlob(blob, imgName);}});triggerDownload[0].click();triggerDownload.remove();};/*使用的话只需看这段代码*/function createImg() {// 步骤一: 设置生成图片的名字var imgName = $("#Number").val() + ".png";// 步骤二: 选择需要截取的dom, 可以更具需求修改选择器var shareContent = document.getElementById('depotHeadDlg');// 克隆一下需要截取的dom（这个操作必须有, 不然的话页面以外看不到的内容会截取不到）var copyDom = shareContent.cloneNode(true);copyDom.style.width = shareContent.scrollWidth + "px";copyDom.style.height = shareContent.scrollHeight + "px";document.querySelector("body").appendChild(copyDom);// 步骤三: 调用html2canvas 截图html2canvas(copyDom).then(function (canvas) {const context = canvas.getContext("2d");context.imageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;let imgUrl = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");dataURIToBlob(imgName, imgUrl, callback);copyDom.remove();});}3、调用createImg方法就可以截图了