我正在嘗試在 javascript 和 PHP 中將 HTML div 保存為 pdf。我嘗試了很多庫，但所有庫都回傳到 pdf-only HTML 結構。我想轉換為 pdf 的頁面是從一個資料庫表生成的，我已經在其中放置了井結構 HTML 的所有內容。現在我可以將所有輸入資料序列化為action=saveWorkPermit&text_CLMC_491=1515&date_CLMC_494l495d=2021-12-06&time_CLMC_496l497t=10:34&. 我也可以將它們作為 {"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"
uj5u.com熱心網友回復：
我解決了我的問題。這是幫助我的功能：（它適用于文本區域、復選框、單選按鈕、輸入型別文本、日期、時間和下拉串列）：
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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/384569.html
標籤：javascript php pdf