react中html转成图片并下载（html-to-image）

最新推荐文章于 2025-04-11 09:21:43 发布

左&耳

最新推荐文章于 2025-04-11 09:21:43 发布

阅读量850

点赞数 8

文章标签： html react.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43925630/article/details/135380143

版权

本文介绍了如何利用html-to-imageJavaScript库将HTML内容转换为图片数据URL，然后通过创建a标签实现图片的下载功能。

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

import * as htmlToImage from 'html-to-image';

const domEl = useRef(null);

	//domEl是绑定在dom上的ref
	const dataUrl = await htmlToImage.toPng(domEl.current, { pixelRatio: 2 });
	// download image
    const link = document.createElement('a');
    link.download = item.projectName + '.png';
    link.href = dataUrl;
    link.click();