如何创建支持.eml格式的网页下载按钮

静态.eml文件托管场景 #

如果.eml文件已经提前上传到服务器存储，直接用HTML原生属性就能实现，只需要给a标签套按钮样式即可：

• 核心代码：

<a href="/your-server-path/target.eml" download="custom-filename.eml">
  <button type="button">下载EML文件</button>
</a>

• 注意事项：
  • href属性填写.eml文件在服务器的实际可访问路径
  • download属性的值为用户下载时默认展示的文件名，可自定义
  • 若用第三方CDN托管静态资源，需确保CDN响应头配置了允许跨域规则，否则download属性可能失效

前端动态生成.eml文件场景 #

如果.eml文件是根据用户操作实时生成的，可通过Blob对象结合临时URL实现下载：

• 核心代码：

// 替换为你实际生成的eml内容字符串
const emlContent = `From: sender@example.com
To: receiver@example.com
Subject: 测试EML文件
Date: Tue, 15 Aug 2023 10:00:00 +0800
Content-Type: text/plain; charset=utf-8

这是EML文件的正文内容`;

function downloadEml() {
  // 转换为Blob对象，指定eml对应的标准MIME类型
  const blob = new Blob([emlContent], { type: 'message/rfc822' });
  // 生成临时下载链接
  const tempUrl = URL.createObjectURL(blob);
  // 创建a标签触发下载
  const downloadTag = document.createElement('a');
  downloadTag.href = tempUrl;
  downloadTag.download = 'custom-eml-file.eml';
  document.body.appendChild(downloadTag);
  downloadTag.click();
  // 下载完成后清理临时资源
  document.body.removeChild(downloadTag);
  URL.revokeObjectURL(tempUrl);
}

绑定按钮点击事件即可：

<button type="button" onclick="downloadEml()">下载生成的EML文件</button>

服务端动态返回.eml文件场景 #

如果.eml文件由服务端接口生成返回，需要先配置服务端响应头，再配合前端请求实现：

• 服务端必须设置的响应头：
  • Content-Type: message/rfc822
  • Content-Disposition: attachment; filename="your-file-name.eml"
• 前端请求示例：

async function getEmlFromServer() {
  const response = await fetch('/api/generate-eml', { method: 'POST' });
  const blob = await response.blob();
  const tempUrl = URL.createObjectURL(blob);
  const downloadTag = document.createElement('a');
  downloadTag.href = tempUrl;
  downloadTag.download = 'server-eml-file.eml';
  downloadTag.click();
  URL.revokeObjectURL(tempUrl);
}

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