vue3把html生成图片并下载到本地

1. 安装插件 html2canvas插件

npm install  html2canvas
cnpm i  html2canvas  --save

2.在组件中引入

import html2canvas from "html2canvas"

3.完成代码

<template>
    <div>
       <a-button type="primary"@click="saveImage">生成图片</a-button>
       <div ref="imageWrapper">
      		/***
	      	内容
	      	***/
	  	</div>
    </div>
  </template>
  
  <script lang="ts">
    import html2canvas from "html2canvas"
    export default defineComponent({
      setup(props){
        const imageWrapper = ref();
        const saveImage = async () => {
            await html2canvas(imageWrapper.value, {
                backgroundColor: '#fff',
            }).then((canvas) => {
                let url = canvas.toDataURL('image/png');
                let images = url;
                const a = document.createElement('a');
                a.href = images;
                a.download = '下载页面.png';
                a.click();
            })
        };
        return {
          imageWrapper,
          saveImage
        }
      }
    });
  </script>