How to get html structure with user input in php in order to download pdf

Question

I am trying to save HTML div as pdf in javascript and PHP. I have tried a lot of libraries, but all of them are returning to the pdf-only HTML structure. The page I want to convert to pdf is generated from a database table in which I have put everything for well structure HTML. Now I am at the point where I can serialize all my input data in string like action=saveWorkPermit&text_CLMC_491=1515&date_CLMC_494l495d=2021-12-06&time_CLMC_496l497t=10%3A34&. I also can get them in array as {"action": "saveWorkPermit", "text_CLMC_491": "1515" ...}. I have my HTML structure also and then. I am stuck. I do not know how to input in the HTML the values and then get this result HTML and put it in some pdf function. I will really appreciate your answers if you can help me. Here is the Ajax code:

                case "GeneratePdf":
                    var ex = data.details.structure ; // here it is the html
    
                    var array = data.details.data; // this is the data as array
                    for (var key in array) {
                        var type = key.split("_")[0];
                        var value = array[key];
                        if(type == 'check' && value == 'on') {
                            $("#"+key).prop("checked", true);
                        } else if (type == 'gr'){
                            $("input[name="+key+"][value=" + value + "]").prop('checked', true);
                        } else {
                            $("[name='"+key+"']").val(value);
                        }
                        
                    }

                    let mywindow = window.open('', 'SAVE', 'height=650,width=900,top=100,left=150');
                    mywindow.document.write(`MyPdf`);
                    mywindow.document.write('');
                    var params2 = $("#AllWP").serialize();
                    mywindow.document.write(document.getElementById("AllWP").innerHTML); // one more time the html structure
                    mywindow.document.write(params2);   // this is the serialized data
                    mywindow.document.write(ex);    // because of this line it is not working
                    mywindow.document.write('');
                    mywindow.document.close(); 
                    mywindow.focus(); 
                    mywindow.print();
                    mywindow.close();
                break;

This is one of the forms I want to export as pdf:

If there is no way to do that in javascript, I can also get the above data in PHP and loop them there.

The main question is if I have HTML like this :


 
Дата на започване:

and data like this: ..&text_CLMC_494l495d=1515&.. How can I have this:


 
Дата на започване: 

 
1515

Here it is what I have - the first one is the html, the second one are the values with its HTML names:

Here it is the text from data picture:


    


 


 
ПЛАН ЗА КРИТИЧНО ПОВДИГАНЕ ОТ МОБИЛЕН КРАН № 

 
ОР No: 
 


 
Дата на започване: 

 


 
От: 

 

 
До: 

 




 
Отдел/ място, където ще се работи: 

 




 
Кранът е осигурен от: 

 




 
Описание на работата:

action: "saveWorkPermit"
date_CLMC_494l495d: "2021-12-08"
language: "en"
text_CLMC_491: "49846498"
text_CLMC_502l503t: "Някъде"
text_CLMC_506l507t: "Нещо си"
text_CLMC_510l511t: "Тестов пример"
time_CLMC_496l497t: "10:01"
time_CLMC_498l499t: "02:56"

user_13215111 · Answer

I solved my problem. Here is the function which helped me: (it works with textarea, checkbox, radio button, input type text, date, time and dropdowns):

case "GeneratePdf":
                    const e = document.getElementById("AllWP"),
                        npts = e.querySelectorAll("input, select, textarea"); // vsi4ki vyzmokni tagove
                    if (npts) {
                        npts.forEach((npt) => {
                            var rch = npt.getAttribute("type"); // samo za checkbox i radio types
                            var others = npt.tagName.toLowerCase();

                            if (rch == "radio" && npt.checked) {    
                                npt.setAttribute("checked", true);
                            } else if (rch == "checkbox" && npt.checked) {
                                npt.setAttribute("checked", true);
                            } else {
                                switch (others) {
                                    case "input":
                                        npt.setAttribute("value", npt.value);
                                        break;
                                    case "select":
                                        const optns = npt.querySelectorAll("option"),
                                            pre_slctd = npt.querySelector("[selected]");
                                        if (pre_slctd) {
                                            pre_slctd.removeAttribute("selected");
                                        }
                                        optns[npt.selectedIndex].setAttribute("selected", "selected");
                                        break;
                                    case "textarea": 
                                        npt.textContent = npt.value; 
                                    break;
                                }
                            }

                        });
                    } else {
                        console.log("No inputs in ", "AllWP");
                    }

                    let mywindow = window.open('', 'SAVE', 'height=650,width=900,top=100,left=150');
                    mywindow.document.write(`MyPdf`);
                    mywindow.document.write('');
                    mywindow.document.write(e.outerHTML);
                    mywindow.document.write('');
                    mywindow.document.close(); // necessary for IE >= 10
                    mywindow.focus(); // necessary for IE >= 10*/
                    mywindow.print();
                    mywindow.close();
                    break;

How to get html structure with user input in php in order to download pdf

1 Answers