1、引入 js 【密码:gf33】
点击下载 html2canvas.min.js
<script src="{url:@static/octzz/js/html2canvas.min.js}"></script>
2、html代码
<body><div><button type="button" class="layui-btn" onclick="createImg();">截图</button></div><div id="imgDiv" style="z-index: -1;"><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>表格</legend></fieldset><div class="layui-form"><table class="layui-table"><colgroup><col width="150"><col width="150"><col width="200"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>出场时间</th><th>格言</th></tr></thead><tbody><tr><td>贤心</td><td>汉族</td><td>1989-10-14</td><td>人生似修行</td></tr></tbody></table></div></div>
</body>
3、js代码
<script>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 = "20220101.png";// 步骤二: 选择需要截取的dom, 可以更具需求修改选择器var shareContent = document.getElementById('imgDiv');// 克隆一下需要截取的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();});}
</script>
效果