Search code examples
javascriptjspdf

jspdf-autotables listing all options within select (instead of just whats selected)


function addWorkDetailsTopdf(pdf){
                    var tables =  document.querySelectorAll('.pbBody, table');
                    var res = pdf.autoTableHtmlToJson(tables[8]);
                    pdf.autoTable(res.columns, res.data, {
                                        startY: pdf.autoTableEndPosY()+10,
                                        tableWidth: 'wrap',
                                        styles: {cellPadding: 2},
                                        headerStyles: {rowHeight: 15, fontSize: 8},
                                        bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}
                                                         });
                    return pdf;
                }

There are a few more items added to the pdf but eventually save is called. The problem is that a drop down in one of the tables list out all available items rather than just the one selected.

enter image description here

In the image above Cleanup (or any other single item was selected) but it list all items (as stated above).

Why is this happening and how can i fix it?


Solution

  • I manually edited a few things, definitely not an elegant solution. There is a span above the select which houses the value for the selected item. I manually edited the res.data to only have the value I needed

    function addWorkDetailsTopdf(pdf){
                        var tables =  document.querySelectorAll('.pbBody, table');
                        var res = pdf.autoTableHtmlToJson(tables[8]);
                        var serviceType = res.data[0][1];
                        serviceType = serviceType.substr(0, serviceType.indexOf('--'));
                        if(serviceType === ""){
                            serviceType = 'None';
                            }
                        res.data[0][1] = serviceType;
                        pdf.autoTable(res.columns, res.data, {
                                            startY: pdf.autoTableEndPosY()+10,
                                            tableWidth: 'wrap',
                                            styles: {cellPadding: 2},
                                            headerStyles: {rowHeight: 15, fontSize: 8},
                                            bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}
                                                             });
                        return pdf;
                    }