JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div id="report">
    <table>
        <thead>
            <tr data-remove="true" data-content-render="{{theadContent}}">
                <th>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>{{theadContent}}</td>
                                            </tr>
                                        </tbody>
                                    </table></td>
                            </tr>
                        </tbody>
                    </table></th>
            </tr>
        </thead>
        <tbody>
            <tr data-remove="true">
                <th>{{tbodyContent}}</th>
            </tr>
        </tbody>
        <tfoot>
            <tr data-remove="true">
                <th>{{tfootContent}}</th>
            </tr>
        </tfoot>
    </table>
</div>
<div id="tools">
    <button id="btnGenerateHtmlMail">
        Gerar HTML E-mail
    </button>
    <div contenteditable="true" id="result" style="width: 99%;resize: none;border: 1px solid #ccc;padding: 0.5%;"></div>
</div>

CSS

table {
	border-collapse: collapse;
	border-spacing: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

table td, table th {
	padding: 8px;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 1.428571429;
	border: 1px solid #ddd;
}

table > tfoot {
	font-weight: bold;
	text-align: center;
}

JavaScript

$(function() {
    $('#btnGenerateHtmlMail').click(function(ev) {
        var $report = $('#report');
        convertCssToInlineStyle($report);
        var reportHtml = $report.html();
        reportHtml = reportHtml
        /* remove class attribute */
        .replace(/class=('|").*?\1/g, "")
        /* remove id attribute */
        .replace(/id=('|").*?\1/g, "")
        /* remove tab, enter and whitespace */
        .replace(/\s\s+/g, ' ');
        
        // --> chamada ao metódo de @ctgPi
        var buffer = document.createElement('div');
        buffer.innerHTML = reportHtml;
        cleanHTMLForEMail(buffer);
        
        $('#result').text(buffer.innerHTML);
    });
});

// metódo da solução do @ctgPi (http://pt.stackoverflow.com/a/68936/2998)
var attributeWhiteList = ['style'];  // atributos que você quer deixar
var elementWhiteList = ['#text', 'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TH', 'TD', 'P', 'B', 'DIV'];  // elementos que você quer deixar

function cleanHTMLForEMail(node) {
    if (node.nodeName === '#text') {
        // aqui você editar node.textContent pra tirar espaço em branco
        return node;
    }
    
    // listar atributos
    var attributeNames = [];
    for (var i = 0; i < node.attributes.length; i++) {
        attributeNames.push(node.attributes[i].name);
    }
    
    // tirar todos os atributos fora da whitelist
    for (var i = 0; i < attributeNames.length; i++) {
        if (attributeWhiteList.indexOf(attributeNames[i]) === -1) {
            node.removeAttribute(attributeNames[i]);
        }
    }
    
    // listar filhos
    var children = [];
    for (var i = 0; i < node.childNodes.length; i++) {
        children.push(node.childNodes[i]);
    }
    
    // tirar todos os filhos fora da whitelist
    // e limpar os que estão dentro
    for (var i = 0; i < children.length; i++) {
        if (elementWhiteList.indexOf(children[i].nodeName) === -1) {
            node.removeChild(children[i]);
        } else if...