web-dev-qa-db-ja.com

nodemailerのhtmlテンプレートに変数を渡します

Htmlテンプレートを使用してnodemailerでメールを送信したい。そのテンプレートでは、いくつかの変数を動的に注入する必要がありますが、実際にはできません。私のコード:

var nodemailer = require('nodemailer');
var smtpTransport = require('nodemailer-smtp-transport');

smtpTransport = nodemailer.createTransport(smtpTransport({
    Host: mailConfig.Host,
    secure: mailConfig.secure,
    port: mailConfig.port,
    auth: {
        user: mailConfig.auth.user,
        pass: mailConfig.auth.pass
    }
}));
var mailOptions = {
    from: '[email protected]',
    to : '[email protected]',
    subject : 'test subject',
    html : { path: 'app/public/pages/emailWithPDF.html' }
};
smtpTransport.sendMail(mailOptions, function (error, response) {
    if (error) {
        console.log(error);
        callback(error);
    }
});

EmailWithPDF.htmlに次のようなものが欲しいとしましょう:

Hello {{username}}!

私はいくつかの例を見つけました、どこがこんな感じでしたか:

...
html: '<p>Hello {{username}}</p>'
...

しかし、私はそれを別のhtmlファイルにしたいです。出来ますか?

20
Wacław Łabuda

できることは、ノードのfsモジュールを使用してHTMLファイルを読み取り、handlebarsを使用してhtml文字列で変更したい要素を置き換えることです。

var nodemailer = require('nodemailer');
var smtpTransport = require('nodemailer-smtp-transport');
var handlebars = require('handlebars');
var fs = require('fs');

var readHTMLFile = function(path, callback) {
    fs.readFile(path, {encoding: 'utf-8'}, function (err, html) {
        if (err) {
            throw err;
            callback(err);
        }
        else {
            callback(null, html);
        }
    });
};

smtpTransport = nodemailer.createTransport(smtpTransport({
    Host: mailConfig.Host,
    secure: mailConfig.secure,
    port: mailConfig.port,
    auth: {
        user: mailConfig.auth.user,
        pass: mailConfig.auth.pass
    }
}));

readHTMLFile(__dirname + 'app/public/pages/emailWithPDF.html', function(err, html) {
    var template = handlebars.compile(html);
    var replacements = {
         username: "John Doe"
    };
    var htmlToSend = template(replacements);
    var mailOptions = {
        from: '[email protected]',
        to : '[email protected]',
        subject : 'test subject',
        html : htmlToSend
     };
    smtpTransport.sendMail(mailOptions, function (error, response) {
        if (error) {
            console.log(error);
            callback(error);
        }
    });
});
35
Ananth Pai

Nodemailer 2.0.0以降を使用している場合は、次のドキュメントを確認してください: https://community.nodemailer.com/2-0-0-beta/templating/ そこで、彼らはそのようなテンプレートで外部レンダリングを利用する方法を説明します:

// external renderer
var EmailTemplate = require('email-templates').EmailTemplate;
var send = transporter.templateSender(new EmailTemplate('template/directory'));

彼らはまたこの例を与えます:

// create template based sender function
// assumes text.{ext} and html.{ext} in template/directory
var sendPwdReminder = transporter.templateSender(new EmailTemplate('template/directory'), {
    from: '[email protected]',
});

変数を渡す方法がわかります。

email-templatesモジュールが必要になります: https://github.com/crocodilejs/node-email-templates およびテンプレートエンジン選択。

また、email-templatesのドキュメントには、テンプレートを見つけるためにファイル構造を作成する方法が記載されています。

html。{{ext}}(必須)-HTML形式のメール用

text。{{ext}}(オプション)-メール形式のテキスト形式用。

{{ext}}(オプション)-html形式の件名のスタイル。

{{ext}}(オプション)-メールの件名

上記の{{ext}}の値に使用できるテンプレートエンジン拡張(.ejs、.jade、.nunjucksなど)については、サポートされているテンプレートエンジンを参照してください。

IDEでファイルをより簡単に識別できるように、任意のファイル名に任意のプレフィックスを付けることができます。唯一の要件は、ファイル名にhtml。、text。、style。、およびsubjectが含まれていることです。それぞれ。

3
Michael Troger

Web Requestを使用して、handlebarsまたは他のエンジンを使用してhtmlテンプレートを構築できます。

テンプレートを作成する

まず、メール本文用のhtmlテンプレートを作成する必要があります。この例では、handlebars hbsファイルを使用しました。

enter image description here

Htmlで設計を行い、メッセージに必要な変数を追加します。

   <!DOCTYPE html>
   <html>
    <head>
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Welcome Email Template</title>
    </head>
    <body>
     <p style="font-size: 14px; font-weight: normal;">Hi {{data.name}}</p>
    </body>
   </html>

テンプレートリクエストを作成する

このビューへのアクセスを作成する必要があります。次に、リクエストが作成され、テンプレート名をurlパラメーターとして送信して、リクエストを他のテンプレートでパラメーター化できるようにします。

const web = express.Router()

web.post('/template/email/:template', function(req, res) {
  res.render(`templates/email/${req.params.template}`, {
    data: req.body        
  })
})

メール機能

最後に、テンプレートにリクエストを送信した後、メールを送信できます。次のような関数を使用できます。

const nodemailer = require('nodemailer')
const request = require("request")

function sendEmail(toEmail, subject, templateFile) {
    var options = {
        uri: `http://localhost:3000/template/email/${templateFile}`,
        method: 'POST',
        json: { name: "Jon Snow" } // All the information that needs to be sent
    };  
    request(options, function (error, response, body) {
        if (error) console.log(error)
        var transporter = nodemailer.createTransport({
            Host: mailConfig.Host,
            port: mailConfig.port,
            secure: true,
            auth: {
                user: mailConfig.account,
                pass: mailConfig.password
            }
        })
        var mailOptions = {
            from: mailConfig.account,
            to: toEmail,
            subject: subject,
            html: body
        }       
        transporter.sendMail(mailOptions, function(error, info) {
            if (error) console.log(error)
        })
    })
}
2
J.C. Gras

テンプレートエンジンとしてパグを使用している場合

Pugのレンダリング機能を使用して、別のファイルにテンプレートをレンダリングする簡単な方法:

// function to send an e-mail. Assumes you've got nodemailer and pug templating engine installed. 
// transporter object relates to nodemailer, see nodemailer docs for details
const nodemailer = require('nodemailer');
const pug = require('pug');
function send_some_mail(iterable){
var message = {
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Message title',
  html: pug.renderFile(__dirname + 'path_to_template.pug', {iterable: iterable})
};
transporter.sendMail(message, function(err, info){...})
}

// template.pug
each item in iterable
li
  p #{item.name}

詳細については https://pugjs.org/api/getting-started.html をご覧ください。これにより、メッセージが送信されるたびにテンプレートが再コンパイルされることに注意してください。時折の電子メール配信にはこれで問題ありません。大量の電子メールを送信する場合、コンパイルされたテンプレートをキャッシュして回避することができます。必要に応じて、そのセットアップのパグドキュメントをご覧ください。

1
wondersz1

これはテンプレートなしで実行できます。

これに変更してみてください:

`Hello ${username}!`

これらが逆コンマではなく、逆ティックであることを確認してください。

1
Kullya