网站建设制作优帮云seo培训学院官网

1.引入必要的库

这里呢我们使用 html2canvas 库来将 HTML 元素转换为画布（canvas），然后再将其导出为图片。首先，确保在项目中安装了 html2canvas：

npm install html2canvas

2. 组件结构

然后在我们的vue文件里面，我们需要有一个容器来包含想要作为图片内容生成的部分。这里自行在文件里面添加.

   <div class="detail-container" ref="xxxContent"></div>

3. 创建下载功能

在 <script setup> 部分，去定义一个 download 函数，该函数负责生成图片并下载。

const download = async () => {try {isDownloading.value = true; // 设置下载状态为正在下载await nextTick(); // 等待 DOM 更新const html2canvasModule = await import('html2canvas');const html2canvas = html2canvasModule.default;const canvas = await html2canvas(xxxContent.value, {useCORS: true, // 允许跨域scale: 2, // 提高图片质量backgroundColor: '#ffffff', // 设置背景色logging: false // 关闭日志});canvas.toBlob((blob) => {if (blob) {saveAs(blob, `[命名]${[数据相关的部分，可以是id、name什么的] || '详情'}.png`); // 下载图片ElMessage.success('内容已保存为图片'); // 提示用户} else {throw new Error('生成图片失败');}}, 'image/png');} catch (error) {console.error('生成图片失败:', error);ElMessage.error('生成图片失败，请重试'); // 错误处理} finally {isDownloading.value = false; // 重置下载状态}
};

4. 触发下载功能

在模板中，添加一个按钮来触发 download 函数：

<el-button type="danger" @click="download" :loading="isDownloading" class="action-button">{{ isDownloading ? '正在生成...' : '详情图片导出' }}
</el-button>

这样就可以，实现点击按钮，图片生成啦：