html2Canvas页面转图片下载

最新推荐文章于 2025-05-21 11:34:00 发布

爱睡D小猪

最新推荐文章于 2025-05-21 11:34:00 发布

阅读量295

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端插件文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/145188361

前端插件专栏收录该内容

2 篇文章

订阅专栏

html2Canvas页面转图片下载
html2canvas 1.4.1 https://html2canvas.hertzen.com

   downloadPicture () {
            this.flag = false;
            this.$nextTick(() => {
                const dom = document.querySelector(".report-detail-modal");
                
                const ref = this.$refs.detailRef;
              
                var width = dom.style.width;
                
                this.cloneDom = dom.cloneNode(true);
                this.cloneDom.style.position = "absolute";
                this.cloneDom.style.top = "0px";
                this.cloneDom.style.zIndex = "-1";
                this.cloneDom.style.width = width;
                
                document.body.appendChild(this.cloneDom);
                html2canvas(this.cloneDom)
                    .then((canvas) => {
                        // 转成图片，生成图片地址
                        var imgUrl = canvas.toDataURL("image/png");
                        console.log("imgUrl", imgUrl);
                        var eleLink = document.createElement("a");
                        eleLink.href = imgUrl; // 转换后的图片地址
                        eleLink.download = "报告详情";
                        // 触发点击
                        document.body.appendChild(eleLink);
                        eleLink.click();
                        // 然后移除
                        document.body.removeChild(eleLink);
                    })
                    .catch(() => {
                        this.$message("下载失败");
                    });
                this.cloneDom.style.display = "none";
                this.flag = true;
            });
        },