stackoom
  简体   繁体   中英

Import HTML file in Node.JS and pass variable into it

 原文  2020-02-06 15:26:23  3   2    javascript/ html/ node.js

Question

I am creating an email system and I send an activation code to the users. To define the msg object to be sent to the user it has to follow this structure:


    const msg = {
              to: req.body.email,
              from: "anakin@empire.net",
              subject: "Welcome to the Empire!",
              text: `Here is your access code! Shh, don't tell anyone - ${randomNum}`,
              html: CodeActivation <---
            };

For the CodeActivation HTML file I would like to pass randomNum into it which means I would need to actually import this file into Javascript to accept a variable then return the HTML (I've included the HTML file below).

This presents another obstacle, I have a length HTML file that I can't simply just wrap into a string.

Any suggestions would be awesome! Thank you for your time. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="format-detection" content="date=no" /> <meta name="format-detection" content="address=no" /> <meta name="format-detection" content="telephone=no" /> <meta name="x-apple-disable-message-reformatting" /> <!--[if !mso]><!--> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&display=swap" rel="stylesheet" /> <!--<![endif]--> <title>Email Template</title> <!--[if gte mso 9]> <style type="text/css" media="all"> sup { font-size: 100% !important; } </style> <![endif]--> <!-- body, html, table, thead, tbody, tr, td, div, a, span { font-family: Arial, sans-serif !important; } --> <style type="text/css" media="screen"> body { padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none } a { color:#0047ab; text-decoration:none } p { padding:0 !important; margin:0 !important } img { margin: 0 !important; -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .btn-16 a { display: block; padding: 15px 35px; text-decoration: none; } .btn-20 a { display: block; padding: 15px 35px; text-decoration: none; } .l-white a { color: #ffffff; } .l-black a { color: #282828; } .l-pink a { color: #0047ab; } .l-grey a { color: #6e6e6e; } .l-purple a { color: #9128df; } .gradient { background: linear-gradient(to right, #388BFF 0%,#0047ab 100%); } .btn-secondary { border-radius: 10px; background: linear-gradient(to right, #9028df 0%,#0047ab 100%); } .cke_editable, .cke_editable a, .cke_editable span, .cke_editable a span { color: #282828 !important; } .tpl-content { padding: 0 !important; } .mcnPreviewText { display: none !important; } /* Mobile styles */ @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) { .mpx-10 { padding-left: 10px !important; padding-right: 10px !important; } .mpx-15 { padding-left: 15px !important; padding-right: 15px !important; } u + .body .gwfw { width:100% !important; width:100vw !important; } .td, .m-shell { width: 100% !important; min-width: 100% !important; } .mt-left { text-align: left !important; } .mt-center { text-align: center !important; } .mt-right { text-align: right !important; } .me-left { margin-right: auto !important; } .me-center { margin: 0 auto !important; } .me-right { margin-left: auto !important; } .mh-auto { height: auto !important; } .mw-auto { width: auto !important; } .fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; } .column, .column-top, .column-dir-top { float: left !important; width: 100% !important; display: block !important; } .m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; } .m-block { display: block !important; } .mw-15 { width: 15px !important; } .mw-2p { width: 2% !important; } .mw-32p { width: 32% !important; } .mw-49p { width: 49% !important; } .mw-50p { width: 50% !important; } .mw-100p { width: 100% !important; } .mmt-0 { margin-top: 0 !important; } } /** * @tab Page * @section Body Background * @tip Set the styling for email background. * @style Body Background */ .background-body { /*@editable*/ background-color: #f2f5f7; } /** * @tab Page * @section Footer Background * @tip Set the styling for Footer background. * @style Footer Background */ .background-footer { /*@editable*/ background-color: #0047ab; } /** * @tab Page * @section Link Color * @tip Set the styling for link color. * @style Link Color */ a { /*@editable*/ color: #0047ab; } /** * @tab Page * @section Button Background * @tip Set the styling for Buttons background. * @style Button Background */ .btn-16 { /*@editable*/ background-color: #0047ab; } </style> </head> <body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none;"> <center> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;" bgcolor="#f2f5f7" class="gwfw"> <tr> <td style="margin: 0; padding: 0; width: 100%; height: 100%;" align="center" valign="top"> <table width="600" border="0" cellspacing="0" cellpadding="0" class="m-shell"> <tr> <td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="mpx-10"> <!-- Top --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="text-12 c-grey l-grey a-right py-20" style="font-size:12px; line-height:16px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; color:#6e6e6e; text-align:right; padding-top: 20px; padding-bottom: 20px;"> <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="text-decoration:none; color:#6e6e6e;">View this email in your browser</span></a> </td> </tr> </table> <!-- END Top --> <!-- Container --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="gradient pt-10" style="border-radius: 10px 10px 0 0; padding-top: 10px;" bgcolor="#f3189e"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border-radius: 10px 10px 0 0;" bgcolor="#ffffff"> <!-- Logo --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="img-center p-30 px-15" style="font-size:0pt; line-height:0pt; text-align:center; padding: 30px; padding-left: 15px; padding-right: 15px;"> <a href="#" target="_blank"><img src="../HTML/img/stemuli_logo@2x.png" width="112" height="43" mc:edit="image_1" style="max-width:112px;" border="0" alt="" /></a> </td> </tr> </table> <!-- Logo --> <!-- Main --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="px-50 mpx-15" style="padding-left: 50px; padding-right: 50px;"> <!-- Section - Intro --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="pb-50" style="padding-bottom: 50px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="fluid-img img-center pb-50" style="font-size:0pt; line-height:0pt; text-align:center; padding-bottom: 50px;"> <img src="https://www.psd2newsletters.com/templates/purple/images/img_intro_5.png" width="264" height="300" border="0" alt="" /> </td> </tr> <tr> <td class="title-36 a-center pb-15" style="font-size:36px; line-height:40px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-bottom: 15px;"> <strong>Access Code</strong> </td> </tr> <tr> <td class="text-16 lh-26 a-center pb-25" style="font-size:16px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 26px; text-align:center; padding-bottom: 25px;"> Click on the button below to activate code, this is your requested account key code to log in with your email address (name@mail.com) </td> </tr> <tr> <td class="pb-30" style="padding-bottom: 30px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="title-22 a-center py-20 px-50 mpx-15" style="border-radius: 10px; border: 1px dashed #b4b4d4; font-size:22px; line-height:26px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-top: 20px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px;" bgcolor="#f2f5f7"> <strong>CODE : <span class="c-purple" style="color:#9128df;">PURPLE123</span></strong> </td> </tr> </table> </td> </tr> <tr> <td align="center"> <!-- Button --> <table border="0" cellspacing="0" cellpadding="0" style="min-width: 200px;"> <tr> <td class="btn-16 c-white l-white" bgcolor="#f3189e" style="font-size:16px; line-height:20px; mso-padding-alt:15px 35px; font-family:'PT Sans', Arial, sans-serif; text-align:center; font-weight:bold; text-transform:uppercase; border-radius:25px; min-width:auto !important; color:#ffffff;"> <a href="#" target="_blank" class="link c-white" style="display: block; padding: 15px 35px; text-decoration:none; color:#ffffff;"> <span class="link c-white" style="text-decoration:none; color:#ffffff;">ACTIVATE CODE</span> </a> </td> </tr> </table> <!-- END Button --> </td> </tr> </table> </td> </tr> </table> <!-- END Section - Intro --> </td> </tr> </table> <!-- END Main --> </td> </tr> </table> </td> </tr> </table> <!-- END Container --> <!-- Footer --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="background-footer p-50 mpx-15" bgcolor="#0047ab" style="border-radius: 0 0 10px 10px; padding: 50px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="pb-20" style="padding-bottom: 20px;"> <!-- Socials --> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;"> <a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_facebook.png" width="34" height="34" mc:edit="image_6" style="max-width:34px;" border="0" alt="" /></a> </td> <td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td> <td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;"> <a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_instagram.png" width="34" height="34" mc:edit="image_7" style="max-width:34px;" border="0" alt="" /></a> </td> <td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td> <td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;"> <a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_twitter.png" width="34" height="34" mc:edit="image_8" style="max-width:34px;" border="0" alt="" /></a> </td> </tr> </table> <!-- END Socials --> </td> </tr> <tr> <td class="text-14 lh-24 a-center c-white l-white pb-20" style="font-size:14px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 24px; text-align:center; color:#ffffff; padding-bottom: 20px;"> <div mc:edit="text_12"> <br /> <a href="tel:+17384796719" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(738) 479-6719</span></a> - <a href="tel:+13697181973" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(369) 718-1973</span></a> <br /> <a href="mailto:info@website.com" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a> - <a href="www.website.com" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a> </div> </td> </tr> <tr> <td align="center"> <!-- Download App --> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;"> <a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_appstore.png" width="117" height="40" mc:edit="image_10" style="max-width:117px;" border="0" alt="" /></a> </td> <td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td> <td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;"> <a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_gplay.png" width="117" height="40" mc:edit="image_11" style="max-width:117px;" border="0" alt="" /></a> </td> </tr> </table> <!-- END Download App --> </td> </tr> </table> </td> </tr> </table> <!-- END Footer --> </table> <!-- END Footer --> <!-- END Footer --> <!-- Bottom --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="text-12 lh-22 a-center c-grey- l-grey py-20" style="font-size:12px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 22px; text-align:center; padding-top: 20px; padding-bottom: 20px;"> <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">UNSUBSCRIBE</span></a> &nbsp;|&nbsp; <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">WEB VERSION</span></a> &nbsp;|&nbsp; <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">SEND TO A FRIEND</span></a> </td> </tr> </table> <!-- END Bottom --> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </center> </body> </html>

2 answers

solution1
 2  2020-02-06 15:32:28

Pick a template language such as nunjucks , then place an output instruction in the template:

<p>Your random number is {{randomNum}}</p>

… then run the template through the template library: 

const html = nunjucks.render('template.html', { randomNum: get_a_random_number() });

solution2
 0  2020-02-06 15:55:47

Save html somewhere on your server ex: otp.ejs with SEND_CODE text in your file.

fs.readFile(__dirname+"/otp.ejs", {encoding: 'utf-8'}, (err, data) => {
  if(err){
    if(err.code == 'ENOENT'){
      console.error(err.message);
    }else{
      console.error(err);
    }
  } else {
      data = data.replace(/SEND_CODE/g, randomNum);
      const msg = {
        to: req.body.email,
        from: "anakin@empire.net",
        subject: 'Code Verification',
        html   : data,
      };
  }
});

Don't forget to import fs

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to pass/access node.js variable to an html file/template Pass variable in required file node.js how to pass a variable from html to node.js Access JS variable in HTML file via export (Node.js) How to pass an array to display it in an html file? - Node.js How to pass paramters to HTML file in node.js? Import a CSV into a JS variable in Node.js Import node.js variable into database How to import excel file using HTML Input file and read the file contents in Node.js (How to send the fullpath to Node.js) Document is not defined on node.js - How can i import a variable from another .js file to node.js server?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM