码迷,mamicode.com
首页 > 其他好文 > 详细

自动化邮件报告平台-邮件发送highchart图表

时间:2017-07-31 23:02:19      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:java   get   base   发送邮件   通过   服务   显示   内容   hot   

前段时间参与开发这样的一个系统,负责前端设计开发,使用人员提出需要在邮件发送的时候自动获取这些highchart图表数据,并显示在平台页面上,当发送邮件的时候也把图表附带在邮件中。

highchart是一个比较强大的图表组件,这个图表组件以svg方式渲染在网页上,渲染完毕后会在网页中添加了svg元素,可以通过dom 或者jQuery 把svg内容单独抽取出来,此svg元素也能够在网页上直接显示,如下图所示。 
技术分享

但是,在邮箱环境下,这些svg元素不一定能展示在邮件里面,各种邮箱环境不同,在手机端邮件和pc端邮件环境也有影响,显然,这不是我们想要的效果。

我们可以通过把svg转为图片格式传到后台处理,或者把svg转为base64直接添加到邮件中里面,等方式去处理,当然处理方式肯定很多,但是离不开svg转图片格式的过程。 
最后我们使用base64的方式附带在邮件中,原因如下。 
1.图表大小比较小。 
2.平台运行在内部服务器中,不采用把svg转为图片格式单独放在外部服务器中,避免把信息暴露在外部,同时也避免了增加外部服务器的措施。

最后问题变为如何把svg转为base64的方式显示在网页上。

我们可以通过使用 canvg.js 把svg渲染在canvas上,我们知道canvas有一个函数toDataURL能够把canvas上显示的内容保存为base64,所以以后我们发送邮件的时候把base64图片追加到邮件正文中显示就可以了。

TIP: 
anvag.js上遇到的小坑:作者官网版本的canvag把含有中文的图表转为图片格式后中文乱码,建议使用附件附带的canvg版本。

附件附带:通过canvg.js把svg渲染在canvas上的实例。

http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244545
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244541
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244538
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244527
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244528
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244529
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244530

 

自动化邮件报告平台-邮件发送highchart图表

标签:java   get   base   发送邮件   通过   服务   显示   内容   hot   

原文地址:http://www.cnblogs.com/sy646et/p/7266023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!