nodejs在后台发送带有图像的邮件

时间:2017-02-14 09:57:50

标签: node.js email

我想发送邮件像这样enter image description here

现在我正在使用nodemailer和email-templates来完成这项工作,但我无法在后台设计带有图像和徽标的模板。我也读过关于sendgrid的内容,但我不知道如何传输图像。 对我应该寻找的任何帮助或想法

2 个答案:

答案 0 :(得分:2)

我认为您正在寻找将图像嵌入到电子邮件模板中。您可以使用简单的HTML,内联CSS和表格布局来设计电子邮件模板以及nodemailer。 我使用过Node.js和Express.js框架。

 router.get('/api/check',function(req,res){
    var user = "Saurabh";
    var transporter = nodemailer.createTransport({
                    service: 'Gmail',
                    auth:{
                        user:config.central_email,
                        pass:config.central_email_password
                    }
                });    
                var MailOptions = {
                    from: 'Johnson Tiles<apps@hrjindia.in>',
                    to: 'saurabh@sattvarise.com',
                    subject:'Welcome to Sattvarise Technologies -  Augmented Reality Workshop',
                    text:'Welcome to Sattvarise Technologies. We offers market-leading expertise in the latest 3D, Augmented Reality and Virtual Reality for Android, iOS, Google Cardboard, GearVR and more.',
                    html:'<div style="margin:0;padding:0;background-color:#F8F8F8;border:1px solid #ddd">   <img src="cid:image1@johnson.com" width="100%">   <div style="height:1%;"></div>   <div style="border-radius:5px;text-align:justify;padding:15px;box-shadow: 0px 0px 10px 1px #888888;background-color:#FFF;margin:0 auto;font:16px Helvetica,Arial,sans-serif;line-height:1.5;color:#848484;"> <b>Hello '+user+',</b><br>      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to Sattvarise Technologies.   We offers market-leading expertise in the latest 3D, Augmented Reality and Virtual Reality for Android, iOS, Google Cardboard, GearVR and more..      <br><br>      <table border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border-bottom:1px solid #cee3ed;padding:0;background-color:rgba(236,240,241,0.3);">  <caption style="font-size:20px;color:#005999;font-weight:bold;background:rgba(236,240,241,0.3);border-top:1px solid #cee3ed;">How to use</caption>         <tbody>            <tr>               <td width="60"></td>               <td width="160" valign="middle">                  <div style="padding:0 0 0.5em;color:#699bbf;font:bold 16px Helvetica,Arial,sans-serif"><img style="border: 1px solid #cee3ed" src="cid:image2@johnson.com" width="130px"></div>               </td>               <td width="16"></td>               <td width="364" valign="top" style="padding:1.5em 0">                  <table cellpadding="0" cellspacing="0" border="0" style="margin:0;border:0;padding:0;color:#8d9ba6;font:15px Helvetica,Arial,sans-serif;line-height:1.5">                     <tbody>                        <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">1.</td>                           <td valign="top" style="margin:0;padding:0 0 1.25em">                              <span style="font-weight:bold;color:#005999" target="_blank"> Download Android app from google play store</span><br>                              <span style="font-size:13px"><a href="#" style="color:inherit;">Play store link</a></span>                           </td>                        </tr>                        <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">2.</td>                           <td valign="top" style="margin:0;padding:0">                              <span style="font-weight:bold;color:#005999" target="_blank">Download and Print</span><br>                              <span style="font-size:13px">Download and print adjacent image on A4 paper (Either Color/Black & White print).</span>                           </td>                        </tr>                        <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">3.</td>                           <td valign="top" style="margin:0;padding:0">                              <span style="font-weight:bold;color:#005999" target="_blank">Place the Marker</span><br>                              <span style="font-size:13px">Place the printed image on the Floor</span>                           </td>                        </tr>          <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">4.</td>                           <td valign="top" style="margin:0;padding:0">                              <span style="font-weight:bold;color:#005999" target="_blank">Transform your space to luxury</span><br>                              <span style="font-size:13px">Open Johnson Tiles AR app and go to "Transform your space to luxury".</span>                           </td>                        </tr>           <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">5.</td>                           <td valign="top" style="margin:0;padding:0">                              <span style="font-weight:bold;color:#005999" target="_blank">Scan the Marker</span><br>                              <span style="font-size:13px">As camera feed opens in the app, scan the printed image and it will show tiles on top of it. </span>                           </td>                        </tr>          <tr>                           <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">6.</td>                           <td valign="top" style="margin:0;padding:0">                              <span style="font-weight:bold;color:#005999" target="_blank">Select tiles from the catalogue</span><br>                              <span style="font-size:13px"> Use other features from the right panel for a complete experience.</span>                           </td>                        </tr>                     </tbody>                  </table>               </td>               <td width="60"></td>            </tr>         </tbody>      </table>   </div>   <hr>   <div style="height:3%;"></div>   <div>      <div style="height:90px;margin:0 auto;text-align:center;">         <span style="margin:0;border:0;padding:0;color:#8d9ba6;font:20px Helvetica,Arial,sans-serif;line-height:1.5;margin-right:50px;">Follow us on</span>         <a href="http://www.youtube.com/hrjohnsonindia1" target="_blank"><img width="28px" src="cid:image3@johnson.com"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://twitter.com/Hrjohnsonindia" target="_blank"><img width="28px" src="cid:image4@johnson.com"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/HRJIndia" target="_blank"><img width="28px" src="cid:image5@johnson.com"></a><br>         <div style="height:15px;"></div>         <a style="color:#E42C33;padding:5px;background:#F8F8F8;" href="http://www.hrjohnsonindia.com/" target="_blank">http://www.hrjohnsonindia.com/</a>      </div>   </div></div>',
                    attachments:[{
                        filename : 'kat-banner-bg.jpg',
                        path: './public/images/kat-banner-bg.jpg',
                        cid : 'image1@johnson.com'
                    },
                    {
                        filename : 'FINAL_MARKER.jpg',
                        path: './public/images/FINAL_MARKER.jpg',
                        cid : 'image2@johnson.com'
                    },
                    {
                        filename : 'youtube.png',
                        path:   './public/images/youtube.png',
                        cid : 'image3@johnson.com'
                    },
                    {
                        filename : 'twitter.png',
                        path: './public/images/twitter.png',
                        cid : 'image4@johnson.com'
                    },
                    {
                        filename : 'facebook.png',
                        path: './public/images/facebook.png',
                        cid : 'image5@johnson.com'
                    },
                    {
                        filename : 'JOHNSON_MARKER.jpg',
                        path: './public/images/FINAL_MARKER.jpg',
                    }]
                }
                transporter.sendMail(MailOptions,function(error,info){
                   if(error){
                       console.log('Email Error '+error);
                   }
                   else{
                       console.log('Email Sent to user '+info.response);
                       res.json({Message : "Email is sent to user"});
                   }
                });
});

在上面的例子中,所有图像都在express.js框架的公共文件夹中。 在附件选项中,您需要传递要嵌入电子邮件中的图像数组。 cid 用于嵌入图片。 示例:

{
       filename : 'facebook.png',
       path: './public/images/facebook.png',
       cid : 'image5@johnson.com'
}

并在nodemailer中使用该图像

<img width="28px" src="cid:image5@johnson.com">

答案 1 :(得分:1)

  

我应该寻找的任何帮助或想法

查找HTML电子邮件模板。设计HTML电子邮件与为网站设计HTML完全不同。对于电子邮件,您经常需要使用表格进行布局以及在网页设计中遗忘的其他技巧。查找HTML电子邮件模板,阅读HTML电子邮件格式,如果一切都失败,那么您可能需要在某些情况下将文本放入图像中。