DEV Community

Cover image for HTML To Email
Thomas Brillion
Thomas Brillion

Posted on

HTML To Email

It has been a challenging to send emails using HTML layout since most of the elements and CSS properties are not compatible in most of the email clients. You can check them out here.

While there are lots of emails composing frameworks or libraries, you have to use or extend predefined components such as Card, Title, Image and so on. Although it is most reliable if you want to send emails since it is all optimized for most email clients, you might probably want to use your existing html element.

So, for such purpose, I have developed this library.

You can check out the demo here.

This article is just an introduction to my library and I will cover the intuitive ideas in the README.md file of the github repository.

Let's get started.

Installation

Choose one of the following methods.

  • NPM
npm install html-to-table
Enter fullscreen mode Exit fullscreen mode
  • Github ESM Module
import HTML2Table from 'https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.js'
Enter fullscreen mode Exit fullscreen mode
  • Github CJS
const HTML2Table = require('https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.cjs')
Enter fullscreen mode Exit fullscreen mode

Initialization

let html2table = new HTML2Table;
Enter fullscreen mode Exit fullscreen mode

Convert your element

It returns a table element which is similar to the given element.
It also converts SVG element to Img element.

html2table.convert(document.querySelector('your-element-to-convert'));
Enter fullscreen mode Exit fullscreen mode

Optional: you can exclude the elements in the converting process.

Use excludeElementByPattern by passing regex pattern as string.

html2table.excludeElementByPattern('toolbar')

// or
html2table.excludeElementByPattern('(toolbar|title)')
Enter fullscreen mode Exit fullscreen mode

That's all.

I will continue developing the library to handle more layout and scenarios.

Please consider giving the library a star if you find it useful.

Github Link: https://github.com/w99910/html-to-table

Top comments (0)