通过邮箱发送html报表

时间:2021-05-08 07:30:44

前言


需求是发送邮件时, 可以将报表正文贴到邮件里, 可以正常复制选中报表内容.

目前的做法是简单粗暴的转成了一张图片, 这样效果显然是很糟糕的.

今天看到邮箱里可以预览Word, Excel, F12看了下, 他是在一个新的tab里打开,

里面嵌入了一个iframe, 然后调用了永中的dcs做在线预览. 那么报表是不是可以直接输出html到正文, 调用远程css呢.

通过邮箱发送html报表

尝试一: 外置css, js

把报表html中的js, css都改成cdn的地址, 直接单页访问html, 显示正常.

但是插入邮箱正文, 接受方打开邮箱后无法引用css, 报错跨域. 应该是邮箱那边做了限制. 禁止邮件正文引用外部js, css.

尝试二: 内嵌css, js, 直接通过邮箱发送

将finereport.css复制出来, 直接内嵌到html中.

 <style type="text/css">
h1{color:red}
p{color:blue}
......
</style>

复制html内容, 粘贴到qq邮箱正文, 选择html编辑内容, 发送成功.

通过邮箱发送html报表

尝试三: 通过javax.mail发送html邮件

通过代码发送上述相同的html邮件, 邮件发送成功, 但是接受方收到的邮件是空的, 只显示了一个<.

通过邮箱发送html报表

试了下简单的html, 可以正常发送接受, 收到的也是富文本格式的.

那么猜测是邮箱服务器限制了html的大小, 毕竟直接简单粗暴的把一个报表转成html, 内容会比较庞大.

我们案例中用的html体积大概350KB, 可能是因为这个导致通过api发送邮件被bang掉了.

尝试四: 精简html大小

简化了下模板, 只留了两个单元格. 简化了下80多KB的finereport.css, 删掉了控件, 菜单, 图表等一堆css.

得到一个30KB的html, 再次通过javax.mail发送邮件, 这次正常了. 应该就是大小影响了.

通过邮箱发送html报表