Vue使用html2canvas将页面转化为图片

最新推荐文章于 2025-02-19 09:45:40 发布

原创最新推荐文章于 2025-02-19 09:45:40 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

56 篇文章

订阅专栏

这篇博客介绍了如何利用html2canvas库在浏览器环境中将指定DOM元素转换为canvas，进而实现网页内容的截图。内容包括安装、引入和使用html2canvas的详细步骤，并提供了兼容IE的保存图片的方法，涉及DOM操作、数据URL和文件下载相关技术。

安装

npm install --save html2canvas

引入

import html2canvas from "html2canvas"

使用

html2canvas(this.$refs.mydDiv).then(canvas => {
    //兼容ie
    if (navigator.msSaveBlob) {
        let blob = canvas.msToBlob();
        return navigator.msSaveBlob(blob, '图片.png');
    } else {
        let url = canvas.toDataURL("image/png");
        let link = document.createElement("a");
        link.download = '图片.png';
        link.href = url;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
});