DOM导出为图片

最新推荐文章于 2025-04-28 23:50:12 发布

搬砖的小白

最新推荐文章于 2025-04-28 23:50:12 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/weixin_43805439/article/details/123660147

js 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何利用html2canvas这个JavaScript库将网页的某个DOM元素转化为图片。首先通过npm或yarn安装插件，然后导入并使用html2canvas。接着，获取需要导出的DOM元素的尺寸，调用html2canvas方法生成canvas，再将其转换为JPEG图片数据，并创建一个链接下载该图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件 html2canvas

npm install html2canvas
或
yarn add html2canvas

引入插件

import html2canvas from 'html2canvas'

导出图片

// 获取要导出的DOM
const rect = document.querySelector('#chart').getBoundingClientRect()
html2canvas(document.querySelector('#chart'), {
	width: rect.width,
	height: rect.height
}).then(function (canvas) {
   const pageData = canvas.toDataURL('image/jpeg', 1.0)
   const imgData = pageData.replace('image/jpeg', 'image/octet-stream')
   const imgName = '生成图片.jpg'
   const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
   save_link.href = imgData 
   save_link.download = imgName 
   const event = document.createEvent('MouseEvents')
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
   save_link.dispatchEvent(event)
})