前端：使用html2canvas导出图片

本文主要是介绍前端：使用html2canvas导出图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.下载插件

 npm i html2canvas

2.在vue组件中引入

import html2canvas from 'html2canvas'

3.导出函数 ps:domId-要导出部分的元素id，title-导出文件的名称

handleExport(domId,title){

    const targetDom=document.getElementById(domId),height=targetDom.style.height

    targetDom.style.height=targetDom.scrollHeight+'px'

    //通过暂时改变元素的高度，解决因为存在滚动条导出不全的问题

    html2canvas(targetDom, {

        devicePixelRatio: 2

    }).then((canvas) => {

        let dataURL = canvas.toDataURL("image/png");

        if (dataURL !== "") {

            var img = dataURL;

            var alink = document.createElement("a");

            alink.href = img;

            alink.download = title + ".png";

            alink.click();

            targetDom.style.height=height

            //成功导出，恢复元素高度

        }

    });

}

这篇关于前端：使用html2canvas导出图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---