记录一下vue3中把html生成图片并下载到本地

1. 安装依赖

pnpm install html2canvas

2. 在页面用引入依赖

import html2canvas from "html2canvas"

3. 创建div

<div ref="imageRef"> /*** 内容 ***/ </div>

4. TS代码

function saveImage() {
  html2canvas(imageRef.value, {
    backgroundColor: '#fff',
  }).then((canvas) => {
    const images = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = images;
    a.download = '下载页面.png';
    a.click();
  });
}