How to send HTML email with SendGrid Rest API using custom html file with Nodejs handlebars?
[英]How to send HTML email with SendGrid Rest API using custom html file with Nodejs handlebars?
问题描述
我正在尝试使用带有 Nodejs 和车把的 Twilio SendGrid Rest API 发送动态电子邮件。 我创建了自己的自定义模板并将设计放在文件template.html中。 我使用 Nodemailer 和 SMTP 传输成功地使用了这个模板。 但是当尝试使用 SendGrid 发送它时，我收到错误：
ResponseError：在 node_modules/@sendgrid/client/src/classes/client.js:146:29 在 processTicksAndRejections (internal/process/task_queues.js:95:5) {代码：403，响应：{标头：{服务器： 'nginx'，日期：'Wed，2022 年 9 月 7 日 17:03:16 GMT'，'content-type'：'application/json'，'content-length'：'281'，连接：'close'，'access -control-allow-origin'：'https://sendgrid.api-docs.io'，'access-control-allow-methods'：'POST'，'access-control-allow-headers'：'授权，内容-类型，代表，x-sg-elas-acl'，'access-control-max-age'：'600'，'x-no-cors-reason'：'https://sendgrid.com /docs/Classroom/Basics/API/cors.html', 'strict-transport-security': 'max-age=600; includeSubDomains' }，正文：{ 错误：[Array] } } }
这是我的nodejs
const handlebars = require('handlebars');
const path = require('path');
const fs = require('fs');
const sendgrid = require('@sendgrid/mail')
sendgrid.setApiKey(sendgrid_api_key);
//readhtmfile
var readHTMLFile = function (path, callback) {
fs.readFile(path, { encoding: 'utf-8' }, function (err, html) {
if (err) {
throw err;
callback(err);
}
else {
callback(null, html);
}
});
};
//dynamic variable received from client
var name = 'John Doe';
//email user
readHTMLFile(path.join(__dirname, '/', 'template.html'), function (err, html) {
var template = handlebars.compile(html);
var replacements = {
email_title: 'Welcome email',
email_body: 'Welcome to our website '+name
};
var htmlToSend = template(replacements);
var mailOptions = {
from: '"Company Website" <verified_sendgrid_email@company.com>', // sender address
to: email, // list of receivers
subject: "Welcome email ", // Subject line
html: htmlToSend, // html body
};
sendgrid.send(mailOptions, function (error, response) {
if (error) {
console.log(error);
} else {
console.log(response);
}
});
});
1 个解决方案
解决方案1
0 2022-09-07 17:34:48
在打印正文错误时，我应该这样做，详细的错误是：
{
errors: [
{
message: 'The from address does not match a verified Sender Identity. Mail cannot be sent until this error is resolved. Visit https://sendgrid.com/docs/for-developers/sending-email/sender-identity/ to see the Sender Identity requirements',
field: 'from',
help: null
}
]
}
与我不同，请确保您输入经过验证的 SendGrid 邮件。 我拼错了。
现在一切都像魅力一样！
如果您想知道模板的外观以及如何在此处使其动态化，它是：
模板.html
<html> <head> <style> @media only screen and (max-width: 600px) {.main { width: 320px;important. }:top-image { width; 20px.important: };inside-footer { width: 320px;important: } table[class="contenttable"] { width; 320px:important; text-align: left;important. } td[class="force-col"] { display: block;important. } td[class="rm-col"] { display: none;important. }:mt { margin-top; 15px.important: } *[class];width300 {width. 255px:important;} *[class].block {display:block;important:} *[class];blockcol {display.none:important;}:emailButton{ width; 100%:important; }:emailButton a { display;block:important; font-size.18px:important; } }:coupon { border; 5px dotted #bbb. width: 80%; border-radius: 15px; margin. 0 auto: max-width; 600px: };container { padding: 2px 16px; background-color: #f1f1f1; }:promo { background; #ccc: padding; 3px: };expire { color: red, } </style> </head> <body link="#00a5b5" vlink="#00a5b5" alink="#00a5b5"> <table class="main contenttable" align="center" style="font-weight; normal:border-collapse; collapse:border; 0:margin-left; auto:margin-right; auto:padding; 0:font-family; Arial: sans-serif;color: #555559;background-color: white;font-size: 16px;line-height: 26px;width: 600px,"> <tr> <td class="border" style="border-collapse; collapse:border; 1px solid #eeeff0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 26px:"> <table style="font-weight; normal:border-collapse; collapse:border; 0:margin; 0:padding; 0:font-family; Arial: sans-serif,"> <tr> <td colspan="4" valign="top" class="image-section" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color. #555559:font-family. Arial. sans-serif:font-size; 16px:line-height; 26px:background-color; #fff:border-bottom; none:important;"> <a href="https://mycompany;com"> <img class="top-image" src="https://mycompany;com/images/webb_logo_:png" style="line-height; 1:width, 100px;" alt="My Company Logo"> </a> </td> </tr> <tr> <td valign="top" class="side title" style="border-collapse: collapse;border: 0;margin: 0;padding: 20px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial; sans-serif:font-size; 16px:line-height; 26px:vertical-align; top:background-color, white;border-top: none;"> <table style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial; sans-serif:"> <tr style="display, none;important:"> <td class="head-title" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 28px;line-height: 34px;font-weight: bold; text-align: center;"> <div class="mktEditable" id="main_title"> {{{email_title}}} </div> </td> </tr> <tr style="display: none,important;"> <td class="sub-title" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;padding-top:5px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial; sans-serif:font-size; 18px:line-height; 29px:font-weight, bold;text-align: center;"> <div class="mktEditable" id="intro_title"> {{{email_subtitle}}} </div></td> </tr> <tr> <td class="top-padding" style="border-collapse: collapse;border: 0;margin: 0;padding: 5px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;"></td> </tr> <tr> <td class="grey-block" style="border-collapse: collapse;border: 0;margin: 0.-webkit-text-size-adjust. none:color; #555559:font-family; Arial: sans-serif;font-size: 16px;line-height: 26px;background-color: #fff; text-align:center."> <div class="mktEditable" id="cta"> <img class="top-image" src="https.//mycompany:com/images/learn;gif" style="width:100%;important:" /> <br><br> <a style="color;#000067: background-color;#FCE8ED: border; 10px solid #FCE8ED: border-radius; 3px: text-decoration,none;" href="https://mycompany;com/login:php"> Log In Your Account Now </a> </div> </td> </tr> <tr> <td class="top-padding" style="border-collapse; collapse:border; 0:margin; 0:padding; 15px 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif,font-size; 16px:line-height; 21px:"> <hr size="1" color="#eeeff0"> </td> </tr> <tr> <td class="text" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 26px:"> <div class="mktEditable" id="main_text"> {{{email_body}}} <br><br> <span style="font-style; italic:"> <small> <strong> “ Build powerful and beautiful websites in 5 mins or less without coding ” </strong> </small> </span> </div> </td> </tr> <tr> <td style="border-collapse; collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial; sans-serif:font-size, 16px;line-height: 24px;">  :<br> </td> </tr> <tr> <td class="text" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 24px:"> <div class="mktEditable" id="download_button" style="text-align; center:"> </div> </td> </tr> </table> </td> </tr> <tr> <td style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif,font-size; 16px:line-height; 24px: padding; 20px:"> <div class="mktEditable" id="cta_try"> <table border="0" cellpadding="0" cellspacing="0" class="mobile" style="font-weight; normal:border-collapse; collapse:border; 0:margin; 0:padding, 0;font-family: Arial; sans-serif:"> <tr> <td class="rm-col" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 24px:padding-right; 15px:"></td> <td class="force-col" valign="top" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family, Arial; sans-serif:font-size; 16px:line-height; 24px:"> <table class="mb mt" style="font-weight; normal:border-collapse; collapse:border; 0:margin; 0:padding; 0:font-family; Arial: sans-serif,margin-bottom; 15px:margin-top; 0:"> <tr> <td class="grey-block" style="border-collapse; collapse:border; 0:margin; 0:padding; 18px:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 24px:background-color; #fff: border-top; 3px solid #00a5b5: border-left; 1px solid #E6E6E6: border-right; 1px solid #E6E6E6: border-bottom; 1px solid #E6E6E6: width; 250px: text-align; center:"> <span style="font-family; Arial: sans-serif; font-size: 24px; line-height? 39px. border-collapse. collapse: border; 0: margin; 0: padding; 0: -webkit-text-size-adjust; none: color; #555559: text-align; center: font-weight; bold:"> Need Help; </span> <br> My Company team is here to support you: Visit our Help Center.<br><br> <a style="color.#ffffff: background-color; #00a5b5: border-top; 10px solid #00a5b5: border-bottom; 10px solid #00a5b5: border-left; 20px solid #00a5b5: border-right; 20px solid #00a5b5: border-radius; 3px: text-decoration;none:" href="http,//mycompany;com/contact:php"> Contact Us </a> </td> </tr> </table> </td> </tr> </table> </div> </td> </tr> <tr bgcolor="#fff" style="border-top; 4px solid #00a5b5:"> <td valign="top" class="footer" style="border-collapse; collapse:border; 0:margin; 0:padding; 0:-webkit-text-size-adjust; none:color; #555559:font-family; Arial: sans-serif;font-size: 16px,line-height; 26px:background; #fff:text-align; center:"> <table style="font-weight; normal:border-collapse; collapse:border; 0:margin; 0:padding, 0;font-family: Arial; sans-serif:"> <tr> <td class="inside-footer" align="center" valign="middle" style="border-collapse; collapse:border; 0:margin; 0:padding; 20px:-webkit-text-size-adjust: none;color: #555559.font-family: Arial, sans-serif;font-size: 12px;line-height: 16px;vertical-align: middle;text-align: center;width: 580px;"> <div id="address" class="mktEditable"> <b> My Company Inc <br> Tech Support : 24/7/365 </b><br> <a style="color: #00a5b5;" href="https://mycompany.com"> Visit our website </a> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
在通过 Sendgrid 的 API 发送的 html email 中的动态文本中添加换行符
[英]Add line breaks to dynamic text in an html email sent via Sendgrid's API
如何在 .NET 应用程序中使用 SendGrid V3 将 email 发送给多个收件人
[英]how to send an email using SendGrid V3 to multiple recipients, in a .NET app
如何在 django 中使用 twilio sendgrid 安排 email？
[英]How to schedule an email using twilio sendgrid in django?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无法使用 SendGrid 将 html 文件作为附件发送
发送动态 PHP HTML With Sendgrid Web API
使用 SendGrid 和 Amazon work 发送电子邮件 email
SendGrid 发送类型 text/plain 和 text/html
如何使用Sendgrid发送个性化邮件 API C#
在通过 Sendgrid 的 API 发送的 html email 中的动态文本中添加换行符
如何在 .NET 应用程序中使用 SendGrid V3 将 email 发送给多个收件人
通过 nodeJs 中的 sendgrid 接收 email
如何在 django 中使用 twilio sendgrid 安排 email？
无法使用 SendGrid 和 blazor webassembly 发送电子邮件
相关标签