0

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?

Pierre
  • 1,129
  • 2
  • 16
  • 30
Emiliano Mercado
  • 11
  • 2
  • Please provide plunker for this. – Anita Feb 12 '21 at 10:54
  • i'm using eclipse for mi back-end and scout-eclipse for front-end. Is that what are you asking?? – Emiliano Mercado Feb 12 '21 at 11:24
  • 1
    Is `table-header-item-text` the name of a class (then you have to prepend it with a period `.table-header-item-text` or an id (then you have to prepend it with a hash `#table-header-item-text`)? The same is valid for the classes or ids you used in this jquery selector: `doc.find('.field has-inner-alignment halign-left valign-top white-space-nowrap')` . You also should learn, how jquery selectors work. Iguess the selector simply do not find elements, as you used them wrong. – Peter Paul Kiefer Feb 12 '21 at 11:36
  • Here is a start point to learn how selectors a used: https://www.w3schools.com/jquery/jquery_ref_selectors.asp And here is a simulator to test: https://www.w3schools.com/jquery/trysel.asp – Peter Paul Kiefer Feb 12 '21 at 11:46
  • hi Peter, i know the error in the .class name, and also i know the syntax to call #id, that was an error writhing the code here.. but that is not the problem because i corrected that, and the selector "find()" is not a jquery selector, is an html2pdf's method. as i said, that works.. but non for all elements. I think i must to separate the classes for example('.group-box-body .logical-grid-layout'), i'll gonna try that.. thank you anyway – Emiliano Mercado Feb 12 '21 at 11:52

0 Answers0