如何使用 php 中的用户输入获取 html 结构以便下载 pdf

Question

我正在尝试将 HTML div 保存为 javascript 和 PHP 中的 pdf。我尝试了很多库，但所有库都返回到仅限 pdf 的 HTML 结构。我要转换为 pdf 的页面是从数据库 table 生成的，我将所有内容都放在了数据库 HTML 中。现在我可以将所有输入数据序列化为 action=saveWorkPermit&text_CLMC_491=1515&date_CLMC_494l495d=2021-12-06&time_CLMC_496l497t=10%3A34& 之类的字符串。我也可以将它们放入数组中，作为 {"action": "saveWorkPermit", "text_CLMC_491": "1515" ...}。我也有我的 HTML 结构。我卡住了。我不知道如何在 HTML 中输入值，然后得到这个结果 HTML 并将其放入某个 pdf 函数中。如果您能帮助我，我将非常感谢您的回答。这是 Ajax 代码：

                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;

这是我想导出为 pdf 的表格之一：

如果在javascript中没有办法做到这一点，我也可以在PHP中获取上述数据并在那里循环。

主要问题是如果我有这样的 HTML :

<div class="row spacer">
<div class="col-sm-2 col-sm-2half "> 
<label for="text_CLMC_494l495d">Дата на започване:</label> 
</div>
<div class="col-sm-4 "> 
<input type="date" id="text_CLMC_494l495d" name="date_CLMC_494l495d" size="0" placeholder="">
</div>

和这样的数据：..&text_CLMC_494l495d=1515&.. 我怎么能有这个：

<div class="row spacer">
<div class="col-sm-2 col-sm-2half "> 
<label for="text_CLMC_494l495d">Дата на започване:</label> 
</div>
<div class="col-sm-4 "> 
<input type="text" id="text_CLMC_494l495d" name="text_CLMC_494l495d" size="0" placeholder="">1515</input>
</div>

这就是我所拥有的 - 第一个是 html，第二个是带有 HTML 名称的值：

这是来自data图片的文字：

<div id="allwpunic">
    <input type="hidden" value="saveWorkPermit" name="action" id="action">
<div class="clmc_header">
<div class="row spacer">
<div class="col-sm-2 "> 
<img src="/assets/images/logotita.png" alt="logo_img">
</div>
<div class="col-sm-7 "> 
<h1>ПЛАН ЗА КРИТИЧНО ПОВДИГАНЕ ОТ МОБИЛЕН КРАН №</h1> 
</div>
<div class="col-sm-1 nopadding"> 
<h4>ОР No:</h4> 
</div><div class="col-sm-2 "> 
<input type="text" style="max-width:100%;" id="text_CLMC_491" name="text_CLMC_491" size="10" placeholder="">
</div></div><div class="row spacer">
<div class="col-sm-2 col-sm-2half "> 
<label for="date_CLMC_494l495d">Дата на започване:</label> 
</div>
<div class="col-sm-4 "> 
<input type="date" id="date_CLMC_494l495d" name="date_CLMC_494l495d" size="0" placeholder="">
</div>
<div class="col-sm-1 nopadding"> 
<label for="time_CLMC_496l497t">От:</label> 
</div>
<div class="col-sm-2 "> 
<input type="time" id="time_CLMC_496l497t" name="time_CLMC_496l497t" size="0" placeholder="">
</div><div class="col-sm-1 nopadding"> 
<label for="time_CLMC_498l499t">До:</label> 
</div>
<div class="col-sm-2 "> 
<input type="time" id="time_CLMC_498l499t" name="time_CLMC_498l499t" size="0" placeholder="">
</div>
</div>
<div class="row spacer">
<div class="col-sm-3 "> 
<label for="text_CLMC_502l503t">Отдел/ място, където ще се работи:</label> 
</div>
<div class="col-sm-9 "> 
<input type="text" style="max-width:100%;" id="text_CLMC_502l503t" name="text_CLMC_502l503t" size="85" placeholder="">
</div>
</div>
<div class="row spacer">
<div class="col-sm-3 "> 
<label for="text_CLMC_506l507t">Кранът е осигурен от:</label> 
</div>
<div class="col-sm-9 "> 
<input type="text" style="max-width:100%;" id="text_CLMC_506l507t" name="text_CLMC_506l507t" size="85" placeholder="">
</div>
</div>
<div class="row spacer">
<div class="col-sm-3 "> 
<label for="text_CLMC_510l511t">Описание на работата:</label> 
</div>
<div class="col-sm-9 "> 
<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"

Answer 1

我解决了我的问题。这是对我有帮助的功能：（它适用于文本区域、复选框、单选按钮、输入类型文本、日期、时间和下拉菜单）：

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;

如何使用 php 中的用户输入获取 html 结构以便下载 pdf

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

javascript

php

pdf