首页 前端知识 发送图文并茂的html格式的邮件

发送图文并茂的html格式的邮件

2024-03-04 10:03:05 前端知识 前端哥 771 193 我要收藏

本文介绍如何生成和发送包含图表和表格的邮件,涉及echarts图表转换为图片、图片内嵌到html邮件内容中、html邮件内容生成、邮件发送方法等

一、图表处理

因为html格式的邮件不支持echarts,也不支持js执行,所以图表需要转换为图片内嵌在邮件内容中
因为平台首页相关统计都是使用echarts渲染展示,为了减少后端接口兼容的工作量,我们使用pyecharts替代,这样就可以使用同样的数据结构和后端接口
pyecharts是python版本的echarts,配置项与echarts基本一致,具体使用方法可以参考官网 https://pyecharts.org/#/zh-cn/chart_api
我们实现的具体代码如下:
在这里插入图片描述
返回是图片的本地绝对路径

需要注意的是,pyecharts render之后生成的是html文件,是通过make_snapshot函数将html转换为图片
1、需要安装库:pyecharts + snapshot_selenium或者snapshot_phantomjs
2、make_snapshot第一个参数是转换引擎,可以使用snapshot_selenium 或者 snapshot_phantomjs
在这里插入图片描述
(1)如果使用snapshot_phantomjs,则需要使用npm安装phantomjs(linux环境同理)
(2)如果使用snapshot_selenium,则需要将浏览器驱动放到python路径下,比如我使用google浏览器,则下载对应版本的驱动chromedriver.exe,放在python.exe所在目录下(linux环境同理)
在这里插入图片描述

二、邮件内容生成

邮件内容最终是html格式,需要将图片和表格等数据全部填充好之后再发送
1、创建模板,需要根据数据实时填充的使用{{xxx}}标识
比如我的周报模板:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专项检测周报</title>
</head>
<body>
<h2 style="font_size:30">【{{busi_plat}}】风险总数为:{{risk_total}}</h2>
<hr style="border: none; border-top: 1px solid #ccc; height: 1px; margin: 20px 0;">
<div>
<table style="cellpadding:0;border: 0px solid #ccc;width:100%">
  <tr>
    <td align="center" valign="top">
      <a href="{{risk_level_pic_href}}">
        <img src="cid:{{risk_level_pic}}" width="720" height="400" alt="Image 1">
      </a>
    </td>
    <td align="center" valign="top">
      <a href="{{risk_status_pic_href}}">
        <img src="cid:{{risk_status_pic}}" width="720" height="400" alt="Image 2">
      </a>
    </td>

  </tr>
  <tr>
    <td align="center" valign="top">
      <a href="{{risk_busi_asc_pic_href}}">
        <img src="cid:{{risk_busi_asc_pic}}" width="720" height="400" alt="Image 1">
      </a>
    </td>
    <td align="center" valign="top">
      <a href="{{risk_check_tool_pic_href}}">
        <img src="cid:{{risk_check_tool_pic}}" width="720" height="400" alt="Image 2">
      </a>
    </td>
  </tr>
</table>
</div>
<div>
<hr style="border: none; border-top: 1px solid #ccc; height: 1px; margin: 10px 0;">
<h3 style="font_size:20">【风险类型汇总 TOP 10】</h3>
<table  width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<th>序号</th>
<th>风险类型</th>
<th>发现工具</th>
<th>风险数量</th>
</tr>
{{risk_top_data}}
</table>
</div>
<div>

<hr style="border: none; border-top: 1px solid #ccc; height: 1px; margin: 10px 0;">
<h3 style="font_size:20">【军规汇总 TOP 10】</h3>
<table  width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<th>序号</th>
<th>军规</th>
<th>发现工具</th>
<th>风险数量</th>
</tr>
{{army_top_data}}
</table>
</div>
<hr style="border: none; border-top: 1px solid #ccc; height: 1px; margin: 10px 0;">
<h3 style="font_size:20">【本周新增明细】</h3>
<a href="{{detail_href}}">按照风险等级排序,最多展示15条,更多详情和记录 点这里>>>></a>
<table  width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<th>序号</th>
<th>业务方向</th>
<th>业务模块</th>
<th>发现工具</th>
<th>风险类型</th>
<th>风险明细</th>
<th>风险等级</th>
<th>状态</th>
<th>操作</th>
</tr>
{{detail_list_data}}
</table>
</body>
</html>

2、获取到统计数据之后,使用replace做替换,生成最终的html格式的邮件内容
在这里插入图片描述

三、发送邮件

在邮件内容中使用的图片需要作为附件一起发送,才能够在邮件中正常显示。
设置方法参考下图
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3203.html
评论
发布的文章

Jquery提供的load方法

2024-03-26 08:03:18

echarts:去掉markLine

2024-03-26 08:03:08

jQuery总结

2024-03-11 10:03:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!