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:34&. 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(`<html><head><title>MyPdf</title>`);
mywindow.document.write('</head><body >');
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('</body></html>');
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 :
<div >
<div >
<label for="text_CLMC_494l495d">Дата на започване:</label>
</div>
<div >
<input type="date" id="text_CLMC_494l495d" name="date_CLMC_494l495d" size="0" placeholder="">
</div>
and data like this: ..&text_CLMC_494l495d=1515&..
How can I have this:
<div >
<div >
<label for="text_CLMC_494l495d">Дата на започване:</label>
</div>
<div >
<input type="text" id="text_CLMC_494l495d" name="text_CLMC_494l495d" size="0" placeholder="">1515</input>
</div>
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:
<div id="allwpunic">
<input type="hidden" value="saveWorkPermit" name="action" id="action">
<div >
<div >
<div >
<img src="/assets/images/logotita.png" alt="logo_img">
</div>
<div >
<h1>ПЛАН ЗА КРИТИЧНО ПОВДИГАНЕ ОТ МОБИЛЕН КРАН №</h1>
</div>
<div >
<h4>ОР No:</h4>
</div><div >
<input type="text" style="max-width:100%;" id="text_CLMC_491" name="text_CLMC_491" size="10" placeholder="">
</div></div><div >
<div >
<label for="date_CLMC_494l495d">Дата на започване:</label>
</div>
<div >
<input type="date" id="date_CLMC_494l495d" name="date_CLMC_494l495d" size="0" placeholder="">
</div>
<div >
<label for="time_CLMC_496l497t">От:</label>
</div>
<div >
<input type="time" id="time_CLMC_496l497t" name="time_CLMC_496l497t" size="0" placeholder="">
</div><div >
<label for="time_CLMC_498l499t">До:</label>
</div>
<div >
<input type="time" id="time_CLMC_498l499t" name="time_CLMC_498l499t" size="0" placeholder="">
</div>
</div>
<div >
<div >
<label for="text_CLMC_502l503t">Отдел/ място, където ще се работи:</label>
</div>
<div >
<input type="text" style="max-width:100%;" id="text_CLMC_502l503t" name="text_CLMC_502l503t" size="85" placeholder="">
</div>
</div>
<div >
<div >
<label for="text_CLMC_506l507t">Кранът е осигурен от:</label>
</div>
<div >
<input type="text" style="max-width:100%;" id="text_CLMC_506l507t" name="text_CLMC_506l507t" size="85" placeholder="">
</div>
</div>
<div >
<div >
<label for="text_CLMC_510l511t">Описание на работата:</label>
</div>
<div >
<input type="text" style="max-width:100%;" id="text_CLMC_510l511t" name="text_CLMC_510l511t" size="85" placeholder="">
</div>
</div>
</div>
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"
CodePudding user response：
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(`<html><head><title>MyPdf</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(e.outerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
break;