如何从动态div的结构生成pdf

Question

我已经看到了一些使用jspdf来解决此问题的示例，在我的情况下，这很复杂，因为我必须生成在调用服务时生成的报告，并且需要生成html页面上显示的pdf包括徽标。我看到了使用画布的示例，但是它对我不起作用，因为它是一张照片，并且它不允许以后复制内容，而又不考虑分页问题，​​即如果报告很大，则报告就不能放在单个页面上既然是照片，那不是我可以单击以进行分页

这是我用于js的内容：

function genVerGuiaFondoPDF(nombre) {
    $("#verGuiaFondopdf").css("background", "white");
    $("#verGuiaFondo").show();
    html2canvas($("#verGuiaFondopdf"), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/JPEG");

            var doc = new jsPDF();

            var width = doc.internal.pageSize.width;
            var porcW = 210;
            var height = document.getElementById("verGuiaFondopdf").offsetHeight;
            var porcH = (height * 36) / 100;

            doc.addImage(img, 'JPEG', 0, 0, porcW, porcH);
            doc.save(nombre + '.pdf');

            $("#verGuiaFondopdf").css("background", "");
            $("#verGuiaFondo").hide();
        }
    });
}

这是我的html，生成的示例：

<div id="verGuiaFondo" class="panelPdf" style="width: 595px; height: 842px;">
    <div id="verGuiaFondopdf" class="row-fluid" style=" border:0;">
        <div class="row-fluid panelPdf" style="margin-bottom: 10px; margin-left: 40px; margin-top: 30px;">
            <div class="span8 ">
                <form class="form-horizontal">
                    <div class="control-group pdfSpace">
                        <div class="controls controlsGuiaFondo" style="">
                            <p id="tipoNivelCuadroPdf"><strong>Institución</strong>:  <span id="nombreInstitucion">nombre de la institucion</span></p>  
                        </div>
                    </div>
                </form>        
            </div>
            <div class="span3">
                <img class="alfresco-html-Image__img imageLogoPdf" data-dojo-attach-point="imageNode" src="/share/res/themes/lightTheme/images/alfresco.svg" style="margin-bottom: 15px;" alt="Imagen del logotipo">
            </div>
        </div>
        <div class="row-fluid panelPdf" style=" margin-left: 10px;">
            <form class="form-horizontal">
                <div class="control-group pdfSpace">
                    <div class="controls controlsGuiaFondo" style="">
                        <p id="tipoNivelCuadroPdf" style="text-align: center;"><strong id="nombreNivelPadre">Poner el tipo de nivel</strong>:  <span id="nombreNodoPadre">poner el nombre del nivel</span></p>  
                    </div>
                </div>
            </form>
        </div>
        <div class="row-fluid panelPdf" style="margin-left: 10px;">
            <form class="form-horizontal" id="formHTMLGuiaFondo">
                <div class="control-group pdfSpace">
                    <div class="controls controlsGuiaFondo">
                        <p id="tipoNivelCuadroPdf"><strong id="tipoNivelPadre">tipo de nivel</strong>:  <span id="nombreNivelPadre">nombre del nivel</span></p>
                        <div class="marginLeft20Bottom20">
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">contDesc</span>- <span id="nombreNivelPadre">fecha inicial</span> - <span id="nombreNivelPadre">fecha final</span>, <span id="nombreNivelPadre">lugar</span></p>
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">titulo</span> (<span id="nombreNivelPadre">original o copia</span>)</p>
                            <p id="tipoNivelCuadroPdf">Sig.: <span id="tipoNivelPadre">signatura</span></p>
                        </div>
                    </div>
                </div>
                <div class="control-group pdfSpace">
                    <div class="controls controlsGuiaFondo">
                        <p id="tipoNivelCuadroPdf"><strong id="tipoNivelPadre">tipo de nivel</strong>:  <span id="nombreNivelPadre">nombre del nivel</span></p>
                        <div class="marginLeft20Bottom20">
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">contDesc</span>- <span id="nombreNivelPadre">fecha inicial</span> - <span id="nombreNivelPadre">fecha final</span>, <span id="nombreNivelPadre">lugar</span></p>
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">titulo</span> (<span id="nombreNivelPadre">original o copia</span>)</p>
                            <p id="tipoNivelCuadroPdf">Sig.: <span id="tipoNivelPadre">signatura</span></p>
                        </div>
                        <div class="marginLeft20Bottom20">
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">contDesc</span>- <span id="nombreNivelPadre">fecha inicial</span> - <span id="nombreNivelPadre">fecha final</span>, <span id="nombreNivelPadre">lugar</span></p>
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">titulo</span> (<span id="nombreNivelPadre">original o copia</span>)</p>
                            <p id="tipoNivelCuadroPdf">Sig.: <span id="tipoNivelPadre">signatura</span></p>
                        </div>
                    </div>
                </div>
                <div class="control-group pdfSpace">
                    <div class="controls controlsGuiaFondo">
                        <p id="tipoNivelCuadroPdf"><strong id="tipoNivelPadre">Orden de mando</strong>:  <span id="nombreNivelPadre">Segundo frente</span></p>
                        <div class="marginLeft20Bottom20">
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">4</span>- <span id="nombreNivelPadre">20?/10/2018</span> - <span id="nombreNivelPadre">30/s.m./2019?</span>, <span id="nombreNivelPadre">Sierra Maestra</span></p>
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">Orden de Invasion</span> (<span id="nombreNivelPadre">Original</span>)</p>
                            <p id="tipoNivelCuadroPdf">Sig.: <span id="tipoNivelPadre">20-90-3</span></p>
                        </div>
                        <div class="marginLeft20Bottom20">
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">4</span>- <span id="nombreNivelPadre">20?/10/2018</span> - <span id="nombreNivelPadre">30/s.m./2019?</span>, <span id="nombreNivelPadre">Sierra Maestra</span></p>
                            <p id="tipoNivelCuadroPdf"><span id="tipoNivelPadre">Orden de Invasion</span> (<span id="nombreNivelPadre">Original</span>)</p>
                            <p id="tipoNivelCuadroPdf">Sig.: <span id="tipoNivelPadre">20-90-3</span></p>
                        </div>
                    </div>
                </div>
            </form> 
        </div>
    </div>       
</div>

我希望我能从div生成具有确切结构的pdf的一些答案，类似于javascript中的方法，例如genPDF($("#divForThePDF"))