I'm trying to export a div to PDF, the problem is that when I try to export this div to PDF gives me the following error:

Uncaught Invalid orientation: [object object] ....... jspdf.min.js : 43.

Can someone help me?

Image With Error

HTML

<script src="/plugins/jquery/js/jQuery-2.1.4.min.js"></script>
<scriptsrc=".9.0rc1/jspdf.min.js"></script>
<scriptsrc=".4.1/html2canvas.min.js"></script>

<div id="renderPDF" class="tab-pane fade in active"> 
    <div class="table-responsive panel">
        <table class="table">
            <tbody>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-user"></i> Nome
                    </td>
                    <td>@Model.Nome</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-home"></i> Morada
                    </td>
                    <td>@Model.Morada</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-phone"></i> Telemóvel
                    </td>
                    <td>@Model.Telemovel</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-envelope"></i> E-mail
                    </td>
                    <td>@Model.Email</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<button type="button" class="btn btn-primary btn-circle btn-xl" id="btnPrint" data-toggle="tooltip" title="PDF"> 
    <i class="glyphicon glyphicon-floppy-disk"></i>
</button>

JavaScript

<script language="javascript">
    var cache_width = $('#renderPDF').width(); //Criado um cache do CSS
    var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

    $(document).on("click", '#btnPrint', function () {
        // Setar o width da div no formato a4
        $("#renderPDF").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

        // Aqui ele cria a imagem e cria o pdf
        html2canvas($('#renderPDF'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png", 1.0);
                var doc = new jsPDF({ unit: 'px', format: 'a4' });
                doc.addImage(img, 'JPEG', 20, 20);
                doc.save('NOME-DO-PDF.pdf');
                //Retorna ao CSS normal
                $('#renderPDF').width(cache_width);
            }
        });
    }); 
</script>

I'm trying to export a div to PDF, the problem is that when I try to export this div to PDF gives me the following error:

Uncaught Invalid orientation: [object object] ....... jspdf.min.js : 43.

Can someone help me?

Image With Error

HTML

<script src="/plugins/jquery/js/jQuery-2.1.4.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare./ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare./ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="renderPDF" class="tab-pane fade in active"> 
    <div class="table-responsive panel">
        <table class="table">
            <tbody>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-user"></i> Nome
                    </td>
                    <td>@Model.Nome</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-home"></i> Morada
                    </td>
                    <td>@Model.Morada</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-phone"></i> Telemóvel
                    </td>
                    <td>@Model.Telemovel</td>
                </tr>
                <tr>
                    <td class="text-success">
                        <i class="fa fa-envelope"></i> E-mail
                    </td>
                    <td>@Model.Email</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<button type="button" class="btn btn-primary btn-circle btn-xl" id="btnPrint" data-toggle="tooltip" title="PDF"> 
    <i class="glyphicon glyphicon-floppy-disk"></i>
</button>

JavaScript

<script language="javascript">
    var cache_width = $('#renderPDF').width(); //Criado um cache do CSS
    var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

    $(document).on("click", '#btnPrint', function () {
        // Setar o width da div no formato a4
        $("#renderPDF").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

        // Aqui ele cria a imagem e cria o pdf
        html2canvas($('#renderPDF'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png", 1.0);
                var doc = new jsPDF({ unit: 'px', format: 'a4' });
                doc.addImage(img, 'JPEG', 20, 20);
                doc.save('NOME-DO-PDF.pdf');
                //Retorna ao CSS normal
                $('#renderPDF').width(cache_width);
            }
        });
    }); 
</script>

• javascript
• html
• asp-mvc

Share Improve this question Follow edited Aug 9, 2018 at 13:32 BDL 22.2k3232 gold badges5454 silver badges6262 bronze badges asked Aug 9, 2018 at 12:30 NavasNavas 3911 gold badge22 silver badges88 bronze badges 2

• the error message will have a stack trace - trace it back to which line of your code is responsible – Jaromanda X Commented Aug 9, 2018 at 12:39
• @Geshode: When you edit make sure to improve the post and do not introduce new errors! "Errorä" or adding "...". – BDL Commented Aug 9, 2018 at 13:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can't set param jsPDF() fucntion as data object. a4 is default format. No need to set. You can visit this link to refer more: https://micropyramid./blog/export-html-web-page-to-pdf-using-jspdf/

<script language="javascript">
    var cache_width = $('#renderPDF').width(); //Criado um cache do CSS
    var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

    $(document).on("click", '#btnPrint', function () {
        // Setar o width da div no formato a4
        $("#renderPDF").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

        // Aqui ele cria a imagem e cria o pdf
        html2canvas($('#renderPDF'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/jpeg", 1.0);
                //var doc = new jsPDF({ unit: 'px', format: 'a4' });//this line error
                var doc = new jsPDF('landscape'); // default is portrait
                doc.addImage(img, 'JPEG', 20, 20);
                doc.save('NOME-DO-PDF.pdf');
                //Retorna ao CSS normal
                $('#renderPDF').width(cache_width);
            }
        });
    }); 
</script>