Next.js 13中如何将名片生成器的div内容下载为JPEG文件？

可以通过DOM转Canvas再导出图片的方式实现，下面提供两种可行方案：

方案一：使用html2canvas库（推荐，适合复杂DOM结构） #

这个库能直接将指定DOM元素渲染为Canvas，无需手动绘制内容。

实现代码 #

<!-- 名片容器 -->
<div id="business-card" style="width: 300px; height: 200px; background: #fff; border: 1px solid #000; padding: 20px;">
  <h3>张三</h3>
  <p>前端开发工程师</p>
  <p>邮箱：zhangsan@example.com</p>
</div>
<!-- 下载按钮 -->
<button id="download-btn">下载名片</button>

<!-- 引入html2canvas脚本 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
document.getElementById('download-btn').addEventListener('click', async () => {
  // 获取名片DOM元素
  const cardEl = document.getElementById('business-card');
  
  // 将DOM转为Canvas
  const canvas = await html2canvas(cardEl, {
    backgroundColor: '#ffffff' // 强制设置白色背景，避免JPEG透明区域显示黑色
  });
  
  // 将Canvas转为JPEG Blob并触发下载
  canvas.toBlob((blob) => {
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'my-business-card.jpg'; // 自定义下载文件名
    downloadLink.click();
    
    // 释放临时URL，避免内存泄漏
    URL.revokeObjectURL(downloadLink.href);
  }, 'image/jpeg', 0.95); // 0.95为JPEG质量（0-1，值越高质量越好）
});
</script>

关键注意点 #

• 必须设置backgroundColor：JPEG不支持透明，若DOM背景透明，导出的图片对应区域会显示黑色
• 若你的名片包含跨域图片，需要在html2canvas配置中添加useCORS: true

方案二：手动用Canvas绘制（适合极简结构） #

如果名片内容非常简单，也可以直接用Canvas API手动绘制所有元素，无需依赖第三方库。

实现代码 #

<button id="download-btn">下载名片</button>

<script>
document.getElementById('download-btn').addEventListener('click', () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置Canvas尺寸与名片一致
  canvas.width = 300;
  canvas.height = 200;
  
  // 绘制背景
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制边框
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  // 绘制文字内容
  ctx.fillStyle = '#000';
  ctx.font = 'bold 18px Arial';
  ctx.fillText('张三', 20, 40);
  
  ctx.font = '14px Arial';
  ctx.fillText('前端开发工程师', 20, 70);
  ctx.fillText('邮箱：zhangsan@example.com', 20, 100);
  
  // 触发下载
  canvas.toBlob((blob) => {
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'my-business-card.jpg';
    downloadLink.click();
    URL.revokeObjectURL(downloadLink.href);
  }, 'image/jpeg', 0.95);
});
</script>

优缺点 #

• 优点：无第三方依赖，体积小
• 缺点：需要手动处理所有样式（字体、颜色、布局、图片等），结构复杂时维护成本极高

内容的提问来源于stack exchange，提问作者Reza Rahem