vue3.0把html生成图片以及把图片下载到本地

1. 安装插件     html2canvas插件

npm install  html2canvas
cnpm i  html2canvas  --save

2.如何使用

在组件中引入

import html2canvas from "html2canvas";

3.综合使用

<template>
    <div>
        <div ref="poster" class="posterImg">
            <h3>公告</h3>
            <p>
                如果同学们的这个项目写的比较快,也能接收额外实战知识，增加难度
            </p>
            <img src="@/assets/icon_login.png" />

        </div>
        <img :src="posterimg"/>
        <button type="button" class=""  @click="goDown">下载</button>
        <!-- volar -->
    </div>
</template>

<script setup lang="ts">
import {  ref} from "vue";
import html2canvas from "html2canvas";
const  posterimg  = ref();
// 绑定  需要把那个内容生成图片
const  poster  =ref();

const  goDown = ()=> {
    //    document.querySelector() document.getElementById
    // html2canvas(绑定的元素,{})
    // 海报图默认是  2倍尺寸
    html2canvas(poster.value,{
        backgroundColor:'#f5f5f5',//海报的背景颜色
        useCORS:true, // 允许跨域 
        width:100, //生成海报的w
        height:200, //生成海报的h    默认是px
    }).then(canvas=>{
        // canvas 其实就是我们所讲的res 的意思 返回报文的意思
        let  baseImg = canvas.toDataURL("image/png");
        posterimg.value =baseImg;
        let save  = document.createElement('a');
        // <a href=''></a>
        save.href = baseImg;
        // 下载的名字
        save.download = 'yz'
        // 直接回调a的点击事件
        save.click()

    })

}
 </script>