前端页面Dom生成图片

最新推荐文章于 2024-09-11 16:21:25 发布

原创最新推荐文章于 2024-09-11 16:21:25 发布 · 773 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

文章介绍了如何通过npm安装html2canvas库，然后导入并使用该库将DOM转换为图片。提供的函数downloadDom接受两个参数，分别是dom元素和图片文件名，生成JPEG图片并自动下载。

首先安装

npm install --save html2canvas

然后引入

import html2canvas from "html2canvas"

这个是方法

第一个参数为dom第二个是导出图片名称
export function downloadDom(dom, fileName) {
  html2canvas(dom).then(canvas => {
    const a = document.createElement('a')
    a.href = canvas.toDataURL("image/jpeg");
    // a.download 后面的内容为自定义图片的名称
    a.download = fileName || 'download'
    a.click()
  })
}

调用即可