React Native

Convert HTML Web Page to Email and Send

See more MHT / HTML Email Examples

Converts an HTML page at a URL into an email with embedded images and sends it. React Native

import { Email, MailMan, Mht } from '@chilkat/react-native'

async function chilkatExample() {
  // This example assumes the Chilkat API to have been previously unlocked.
  // See Global Unlock Sample for sample code.

  const mailman = new MailMan();

  // The MHT component can be used to convert an HTML page
  // from a URL, file, or in-memory HTML into an email
  // with embedded images and style sheets.
  const mht = new Mht();

  const email = new Email();

  // There are two ways of embedding images in emails: with CIDs
  // and without.  When using CIDs, the IMG SRC attributes use
  // urls that begin with "cid:" and the corresponding image
  // embedded within the email includes a Content-ID header field.
  // When not using CIDs, the IMG SRC attribute can have a URL,
  // path, etc. and the corresponding image embedded within
  // the email has a matching Content-Location header field.

  // When testing with GMail, if CIDs are used the email will
  // be displayed with images blocked (by default) unless
  // the user allows them to be displayed.  Without CIDs,
  // the images are automatically displayed.

  // When testing with Eudora, Mozilla Thunderbird, and Outlook Express, 
  // embedded images display correctly with our without CIDs.

  // When testing with Yahoo! Mail, embedded images display OK.
  // However, the Yahoo! Mail user has the option of blocking
  // images.  If this is turned on, the CID images will still 
  // display correctly even though images are blocked.  Why?
  // It's because when viewing the email there is no external
  // HTTP request to fetch an image.  Therefore, a spammer 
  // cannot get an indication that you've read the email. 
  // However, if CIDs are not used, the images are blocked by 
  // any Yahoo! Mail user that has image blocking turned on --
  // even though the images are embedded.

  // I haven't tested Hotmail yet...
  // Regardless, there is no perfect solution.  If CIDs are used,
  // GMail users may block your embedded images, if CIDs are not
  // used, Yahoo! Mail users may block your embedded images.

  // I recommend setting using CIDs.  This is what Mozilla Thunderbird
  // does by default, and it's the more clear an unambiguous way
  // to indicate that images are indeed embedded.
  mht.useCids = true;

  let emlStr: string;
  try {
    emlStr = await mht.getEMLAsync('http://www.bonairefishing.com/');
  } catch {
    console.log(mht.lastErrorText);
    return;
  }

  try {
    email.setFromMimeText(emlStr);
  } catch {
    console.log(email.lastErrorText);
    return;
  }

  email.subject = 'Test HTML email';

  // This example is tested in:
  // Outlook 2000, Eudora 7, Mozilla Thunderbird 1.5.0.9, Outlook Express 6, GMail, Yahoo Mail
  email.addTo('Chilkat Support', 'support@chilkatsoft.com');

  // Note: Chilkat does not regularly check our GMail and Yahoo
  // email accounts.  Please send support email to support@chilkatsoft.com
  email.addTo('Chilkat on Yahoo', 'chilkat_software@yahoo.com');
  email.addTo('Chilkat on GMail', 'chilkat.support@gmail.com');

  email.from = 'chilkat@live.com';

  // Send email using smtp.live.com
  mailman.smtpHost = 'smtp.live.com';
  mailman.smtpUsername = 'chilkat@live.com';
  mailman.smtpPassword = 'myPassword';
  mailman.smtpPort = 587;
  mailman.startTLS = true;

  try {
    await mailman.sendEmailAsync(email);
  } catch {
    console.log(mailman.lastErrorText);
    return;
  }

  try {
    await mailman.closeSmtpConnectionAsync();
  } catch {
    console.log(mailman.lastErrorText);
    return;
  }

  console.log('HTML Email Sent!');
}