html2canvas 将DOM节点转成图片

yueF_L

已于 2024-03-02 10:30:22 修改

阅读量446

点赞数 5

分类专栏：前端大杂烩文章标签：前端 javascript 开发语言

于 2024-03-01 17:18:39 首次发布

本文链接：https://blog.csdn.net/weixin_38982591/article/details/136401814

版权

前端大杂烩专栏收录该内容

24 篇文章 0 订阅

订阅专栏

官网地址：html2canvas - Screenshots with JavaScript

将js文件保存到本地

可以新建一个txt文件，然后丢进去修改后缀名称即可。

在项目中引入js文件：

import html2canvas from "../html2canvas.min.js"

这是我准备画的DOM节点。

onClickPng() {
            let loading = uiHelp.loading("下载中...");
            html2canvas(document.querySelector("#capture")).then(canvas => {
                document.querySelector(".png").appendChild(canvas);
                document.body.appendChild(canvas);
                const aLink = document.createElement('a');
                const evt = document.createEvent('HTMLEvents');
                evt.initEvent('click', true, true);
                aLink.download = "排班信息";
                aLink.href = canvas.toDataURL();
                aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
                uiHelp.loadingClose(loading);
            });
        },

解决出现滚动条截取不全问题

 onClickPng() {
            let loading = uiHelp.loading("下载中...");
            var targetDom = document.getElementById('capture');
            html2canvas(targetDom, {
                // 设置宽高，防止出现滚动条导致截取不全问题
                height: targetDom.scrollHeight,//canvas高
                width: targetDom.scrollWidth //canvas宽
            }).then(canvas => {
                // document.body.appendChild(canvas);
                const aLink = document.createElement('a');
                const evt = document.createEvent('HTMLEvents');
                evt.initEvent('click', true, true);
                aLink.download = "排班信息";
                aLink.href = canvas.toDataURL();
                aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
                uiHelp.loadingClose(loading);
            });
        },