javascript - JavaScript将Div导出为PDF

我正在尝试将div导出为PDF，问题是当我尝试将div导出为PDF时出现以下错误:



有人能帮我吗？

图片错误

HTML

<script src="/plugins/jquery/js/jQuery-2.1.4.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/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>

最佳答案

您不能将参数jsPDF()功能设置为数据对象。 a4是默认格式。无需设置。您可以访问此链接以引用更多信息:https://micropyramid.com/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>