javascript - How can i hide different divs, or element chidrens with html2pdf library?

Question

i'm using just javascript in scout framework, to get pdf from dinamic html site, my index.js:

function buttonHtml2Pdf() {
    button = '<input type= "button" value="Stampa html2Pdf" id="html2pdf" class="menu-item menu-button unfocusable menubar-item left-of-button";" />';
    $(button).insertBefore($("div[data-classid='DettaglioArticoliButton_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']"));
    $("#html2pdf").click("click", function() {
        var $elementoDaConvertire = $("div[data-classid='DettaglioOrdineBox_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
        var elemClass = $("div[data-classid='org.eclipse.scout.apps.crm.client.crm.ContoClienteForm$MainBox$DettaglioArticoliBox$DettArticoliField$Table_DettArticoliField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
        var opt = {
            margin: 1,
            filename: 'Dettaglio_Ordini.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2,
                letterRendering: true,
                imageTimeout: 0,
                width: 850,
                height: 1200,
                scrollX: 0,
                scrollY: 20
            },
            jsPDF: {
                unit: 'in',
                format: 'a4',
                orientation: 'portrait',
                putOnlyUsedFonts: true,
                floatPrecision: 'smart'
            }
        };
        var worker = html2pdf();
        worker = html2pdf().set(opt).from($elementoDaConvertire).toContainer().then(() => {
                const doc = $('.html2pdf__container');
                doc.find('.menubar').remove();
                doc.find('.unfocusable').remove();
                //doc.find($("div[data-classid='DeliveryNameOrderField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html()).remove();
                doc.find('.field has-inner-alignment halign-left valign-top white-space-nowrap').hide();
            })
            .toPdf().get('pdf')
            .then(function(pdf) {
                pdf.addPage();
            }).set(opt).from(elemClass).toContainer().toCanvas().then(() => {
                var doc2 = $('.html2pdf__container');
                doc2.find('table-header-item-text').remove();
            }).toPdf().save().catch(function(error) {});

    });
}

As you see i must to take de "data-classid" generated from scout framework, i can't modify the id and also taht doesn't listen my $(".class") call with jquery. what can i do to hide some elements? doc.find().hide()/remove() just work for 2 class: menubar and unfocusable, if i add other class, that is not taken.

If this library is not the solution what else can i do?

标签： javascriptjspdfhtml2canvashtml2pdfeclipse-scout