使用html2canvas将vue或elementUI组件转化为图片并下载。

这里使用的是vue2，vue3使用这个其实也差不多。

首先安装html2canvas

项目里使用html2canvas肯定就直接 npm i html2canvas --save

在组件中引入html2canvas

import html2canvas from 'html2canvas'

在vue中代码如下

<template>
    <div>
        <!-- 如果直接将ref绑定给elementUI组件，html2canvas是无法生成canvas的，我们需要用div将其包裹，后面会说原因。 -->
        <div ref='printElement'>
            <!-- 这里假设我们要生成图片的是elementUI的table-->
            <el-table :data="tableData" style="width: 100%"> 
                <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            </el-table>
        </div>
        <button @printBtn = 'printFun'></button>
    </div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
    methods:{
        //在打印的方法中,调用html2canvas传入规定参数即可
        printFun(){
            html2canvas(this.$refs.printElement, {
                backgroundColor: '#ffffff',
                scale: 2,//如果有滚动条，解决窗口外的内容黑边，根据自身的元素大小传参
              }).then((canvas) => {
                const dataURL = canvas.toDataURL('image/png')
                const a = document.createElement('a')
                document.body.appendChild(a)
                a.href = dataURL
                a.download = 'img' //文件名
                a.click()
              })
        }
    }
}
</script>

解释原理

vue的ref绑定给组件获取到的是组件实例，但绑定给原生html获取到的是dom元素。并且用ref获取到的原生dom元素，该dom元素内的，那怕是组件也被渲染成了原生dom元素。
主要就是利用了ref绑定给组件和原生html的差异。用id绑定给原生html或许也行，你可以试试。
所以我么可以直接利用html2canvas将其生成画布再转化成图片并下载。

生成图片和下载是参考网上的，侵删。