JSFiddle - React, Tailwind, and code Playground

by Martin Murciego

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.38/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.38/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<fieldset class="identado25px printThis">
                                            <legend>Reserva Nro: 1</legend>
                                            <div class="form-group" hidden="">
                                                <label for="inputId" hidden="">id</label>
                                                <input type="hidden" id="inputId" class="form-control" name="id" value="1" hidden="">
                                            </div>
                                            <div class="col-md-8 col-sm-8 col-xs-8">
                                                <dl class="dl-horizontal">
                                                    <dt>Evento</dt>
                                                    <dd>Feria Tecnico - Agronoma</dd>
                                                    <dt>Descripción</dt>
                                                    <dd>Exposicion de maquinarias</dd>
                                                    <dt>Fec. Inicio</dt>
                                                    <dd>11/12/2017 08:00 hs.</dd>
                                                    <dt>Fec. Fin</dt>
                                                    <dd>11/12/2017 23:00 hs.</dd>
                                                    <dt>Tipo de Evento</dt>
                                                    <dd>Feria</dd>
                                                    <dt>Evento Público?</dt>
                                                    <dd> Sí </dd>
                                                    <dt>Organizador</dt>
                                                    <dd>Miguel Angel Ramirez</dd>
                   ...

CSS

/* @media (min-width: 768px) */

        dd, dt {
            line-height: 2;
        }
        
        .identado25px{ margin-left: 25px; margin-top: 25px  }

JavaScript

var html2pdfmake = function (html) {
    var content = [];
    ParseHtml(content, html);
    return content;


    function ParseContainer(cnt, e, p, styles) {
        var elements = [];
        var children = e.childNodes;
        if (children.length !== 0) {
            for (var i = 0; i < children.length; i++) {
                p = ParseElement(elements, children[i], p, styles);
            }
        }
        if (elements.length !== 0) {
            for (var i = 0; i < elements.length; i++) {
                cnt.push(elements[i]);
            }
        }
        return p;
    }

    function ComputeStyle(o, styles) {
        for (var i = 0; i < styles.length; i++) {
            var st = styles[i].trim().toLowerCase().split(':');
            if (st.length === 2) {
                st[0] = st[0].trim();
                st[1] = st[1].trim();
                switch (st[0]) {
                    case 'font-size':
                        o.fontSize = parseInt(st[1]);
                        break;
                    case 'text-align':
                        switch (st[1]) {
                            case 'right':
                                o.alignment = 'right';
                                break;
                            case 'center':
                                o.alignment = 'center';
                                break;
                        }
                        break;
                    case 'font-weight':
                        switch (st[1]) {
                            case 'bold':
                                o.bold = true;
                                break;
                        }
                        break;
                    case 'text-decoration':
                        switch (st[1]) {
                            case 'underline':
                                o.decoration = 'underline';
                                break;
                        }
                        break;
                    case...