html2canvas实现截图功能（解决元素中文字不显示的问题，和使用element-plus组件样式问题）

1. 使用 html2canvas 库来实现自动截图功能。首先，安装 html2canvas：

npm install html2canvas

2. 在需要的组件中导入：

import html2canvas from 'html2canvas';

3. 定义一个DOM元素：

<div ref="screen"></div>
const screen = ref()

4. 在页面中添加一个按钮，来触发截屏：

<el-button size="default" @click="productionFile">下载文件</el-button>

5. 实现基本功能：

// 处理base64转二进制
function convertBase64ToBinary(base64Str: any) {
    const base64Data = base64Str.split(',')[1]
    const binaryStr = atob(base64Data)
    const len = binaryStr.length
    const bytes = new Uint8Array(len)
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i)
    }
    return bytes
}


// 下载到本地
const downloadImage = (blob: any) => {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = '页面截图.png' // 指定下载文件名
    document.body.appendChild(a)
    a.click() // 触发下载
    document.body.removeChild(a) // 清理 DOM
    URL.revokeObjectURL(url) // 释放临时 URL
}

// 生成文件
const productionFile = async () => {
    await nextTick()
    const element = screen.value
    if (element) {
        const canvas = await html2canvas(element)
        const imgData = canvas.toDataURL('image/png')
        const binaryData = convertBase64ToBinary(imgData)
        const blob = new Blob([binaryData], { type: 'image/png' })
        downloadImage(blob)
    }
}

6. 注意点：

在进行，const element = screen.value，赋值的时候，如果绑定的是HTML标签元素，直接赋值就可以了，但是如果绑定是element-plus中的标签，例如：<el-card></el-card>，则赋值应改为：const element = screen.value.$el。

7. 查看下载的文件是否成功：

页面：

截图：

 

 8. 如果页面中有使用，element-plus的组件，例如：button、date-picker，可能会出现，文字不显示的问题，如下：

解决方法：
① 按钮中文字不显示的问题：只要是，行内元素里的块级元素中的文字，都在截图时会消失。解决办法就是：设置标签的样式为行内元素。

例如：

<div style="display: flex">
   <el-button size="default" @click="productionFile >下载文件</el-button>
</div>

② element-plus的组件，例如：button、date-picker，出现内边距阴影的问题：这是由于该插件不支持某些css属性导致的。

 解决办法：对其中的原生样式进行覆盖。
 

:deep(.el-select__wrapper) {
    box-shadow: none !important;
    border: 1px solid #e6e6e6;
}

:deep(.el-date-editor.el-input__wrapper) {
    box-shadow: none !important;
    border: 1px solid #e6e6e6;
}

:deep(.el-input__wrapper) {
    box-shadow: none !important;
    border: 1px solid #e6e6e6;
}

③ 文字向下偏移问题：这是由于插件内部处理导致的，可参考文章。解决方法就是把该插件降级安装"html2canvas": "1.0.0",版本。

"html2canvas": "1.0.0",