create a pdf of a specific div with jspdf

Question

create a pdf of a specific div with jspdf

Navigation

#1 by (3 votes)

1

When I try to create a pdf with jsPdf I can not take the div specific, I tried everything but it does not leave me, any help is well received.

<script>
    $(document).on('ready', function(){
        $('.buttonNext').on('click', function(){
            var contenido = '';


            contenido += '<b>Moderador:</b>' + $('#nombre').val();
            contenido += '<br>';
            contenido +='<b>Tipo de Reunion:</b> ' + $('#tipoReunion option:selected').text();
            contenido += '<br>';
            contenido += '<b>Descripcion:</b>' + $('#descrp').val();
            contenido += '<br>';
            contenido +='<b>Estado de Reunion:</b> ' + $('#estadoReunion option:selected').text();
            contenido += '<br>';
            contenido +='<b>Empresa:</b> ' + $('#SPT1Empresa option:selected').text();
            contenido += '<br>';

            contenido += '<b>Fecha de Realizacion:</b> ' + $('#birthday').val();
            contenido += '<br>';
            contenido += '<b>Nombre tema:</b> ' + $('#tema option:selected').text();
            contenido += '<br>';
            contenido += '<b>Nombre párrafo:</b> ' + $('#parr option:selected').text();
            contenido += '<br>';
            contenido += '<b>Extracto:</b> ' + $('#extracto').text();
            contenido += '<br>';
            contenido += '<b>Preguntas seleccionadas:</b> ' + $('#tblPregunta2 ').each(function(){
                $(this).find('td').each(function(){


                })


            });

            contenido += '<br>';
            contenido += '<button id="cmd1">generate PDF</button>';
            contenido += '<p><a href="pdf.php">Ver tabla en PDF</a></p>';

            $('#resumenContent').html(contenido);
        });
    });



</script>







<!-- End teban -->

<script src="jsPDF-master/jspdf.js"></script>
<script src="jsPDF-master/plugins/standard_fonts_metrics.js"></script>
<script src="jsPDF-master/plugins/split_text_to_size.js"></script>
<script src="jsPDF-master/plugins/from_html.js"></script>
<script src="jsPDF-master/FileSaver.js"></script>


<title></title>
<script>
    $(document).ready(function () {
        $(function () {
            var doc = new jsPDF();
            var specialElementHandlers = {
                '#editor': function (element, renderer) {
                    return true;
                }
            };

            $('#cmd1').click(function () {
                doc.fromHTML($('#resumenContent').html(), 15, 15, {
                    'width': 170,
                    'elementHandlers': specialElementHandlers
                });
                doc.save('Usec.pdf');
            });
        });
    });
</script>

   <div id="step-4">
                                    <h2 class="StepTitle">Paso 4 Resumen</h2>
                                    <div id="resumenContent">

                                    </div>

                                    <div id="editor"></div>


                            </div>

javascript php pdf jspdf

asked by Esteban Peralta 12.01.2017 в 03:36

source

1 answer

Why do I run this on all lines? I can not create a form in c ++ using sharpdevelop

score 3 · Answer 1

The best way to convert a div to PDF is as follows:

1.Add the following script of jsPdf in the <head> of the document:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

2.Add the script to convert to PDF

<script>
    function pruebaDivAPdf() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        source = $('#imprimir')[0];

        specialElementHandlers = {
            '#bypassme': function (element, renderer) {
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };

        pdf.fromHTML(
            source, 
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, 
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                pdf.save('Prueba.pdf');
            }, margins
        );
    }
</script>

3.Add your HTML content

<a href="javascript:pruebaDivAPdf()" class="button">Pasar a PDF</a>
<div id="imprimir">
    <h1>  
        Esto es un DIV impreso en PDF
    </h1>
</div>

NOTE : Do not forget to also add the file js of JQuery

Reference to the original tutorial