vue3+ts+html2canvas实现html下载成图片

<template>
    <div class="reporting">
        <div class="btns">
            <div class="reporting-btn" @click="goDown">下载报告</div>
        </div>
        <div class="content-box">
            <div class="content-box2" ref="canvasRef">
                <el-table :data="[{name:'zhangsan',age:18,female:'男'},{name:'zhangsan',age:18,female:'女'}]">
                    <el-table-column prop="name" label="姓名"/>
                    <el-table-column prop="age" label="年龄"/>
                    <el-table-column prop="female" label="性别"/>
                </el-table>
                即使对方了哈就换地方等级划分等级划分等级的就恢复了开始
                <img src="https://img.tuguaishou.com/ips_templ_preview/f0/f9/5a/lg_3599867_1607869606_5fd624a673379.jpg!w1024_w?auth_key=2300366484-0-0-322cbbf653e2e67b5b049a4c3c78070d" :width="400" :height="200"/>
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import html2canvas from "html2canvas";

    // 绑定  需要把那个内容生成图片
    const canvasRef=ref();

    //下载报告
    function goDown(){
        const {offsetHeight, offsetWidth} = canvasRef.value
        html2canvas(canvasRef.value,{
            backgroundColor:'#23282f',//海报的背景颜色
            useCORS:true, // 允许跨域 
            width:offsetWidth, //生成海报的w
            height:offsetHeight, //生成海报的h    默认是px
        }).then(canvas=>{
            // canvas 其实就是我们所讲的res 的意思 返回报文的意思
            let  baseImg = canvas.toDataURL("image/png");
            let save  = document.createElement('a');
            save.href = baseImg;
            // 下载的名字
            save.download = '报告'
            // 直接回调a的点击事件
            save.click()
    
        })
    }

</script>

<style lang="less" scoped>
    .reporting{
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        .btns{
            display: flex;
            align-items: center;
            &>div:first-child{
                margin-right: 20px;
            }
        }
        .reporting-btn{
            width: 160px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            background-color: rgb(55, 126, 246);
            border-radius: 4px;
            cursor: pointer;
        }
        .content-box{
            width: 100%;
            height: calc(100% - 32px);
            overflow-y: scroll;
            .content-box2{
                width: 100%;
                height: 100%;
                padding: 10px;
                box-sizing: border-box;
            }
        }
    }
</style>