node.js - puppeteer 表单填写日期字段未填写年份
问题描述
我有我想使用 puppeteer 填写的表格，填写并提交后我想将结果导出到 PDF，我在填写日期时遇到问题，因为 puppeteer 正在填写日期字段的日期和月份，但年份留空并且 puppeteer 提交表格因为这个 puppeteer 正在将页面导出为 PDF 并且现有结果不完整
我尝试过的代码很长，但为了理解我附上了我想要的两个图像，我正在得到我想要的是这两个图像
我得到的是这张图片
function ajax11(){
var vesselname=document.getElementById('vesselname');
var date=document.getElementById('date');
var fdata="vesselname="+vesselname.value+"&date="+date.value;
var submitbutton=document.getElementById("submitbutton");
var main=document.getElementById("main");
var dataarra=[];
//var xhttp;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
myObj=JSON.parse(this.responseText);
myObj1=myObj.results;
myObj1.forEach((myObj1,index)=>{
var d1=document.createElement("div");
d1.setAttribute("class","w3-container w3-bottombar w3-topbar w3-leftbar w3-rightbar w3-border-grey");
d1.setAttribute("style","padding-top: 0.5%; padding-bottom: 0.5%;");
d1.setAttribute("name","datacontainer");
d1.setAttribute("id","datacontainer");
main.appendChild(d1);
//document.body.appendChild(d1);
var d5=document.createElement("div");
var table1=document.createElement("table");
var table1tehad=document.createElement("thead");
var table1tehadtr1=document.createElement("tr");
var table1tehadtr2=document.createElement("tr");
var table1tehadtr1th1=document.createElement("th");
var table1tehadtr1th2=document.createElement("th");
var table1tehadtr2th1=document.createElement("th");
var table1tehadtr2th2=document.createElement("th");
var table1tehadtr2th3=document.createElement("th");
var table1tehadtr2th4=document.createElement("th");
var table1tehadtr2th5=document.createElement("th");
var table1tehadtr2th6=document.createElement("th");
var table1tehadtr2th7=document.createElement("th");
var table1tehadtr2th8=document.createElement("th");
var table1tehadtr2th9=document.createElement("th");
var table1tehadtr2th10=document.createElement("th");
var table1tehadtr2th11=document.createElement("th");
d5.setAttribute("class","w3-cell-row");
table1.setAttribute("class","w3-table");
table1tehadtr1th1.setAttribute("colspan","7");
table1tehadtr1th2.setAttribute("colspan","3");
table1tehadtr1th2.setAttribute("class","w3-border w3-center w3-blue-grey");
table1tehadtr2.setAttribute("class","w3-blue-grey");
table1tehadtr2th1.setAttribute("class","w3-border");
table1tehadtr2th2.setAttribute("class","w3-border");
table1tehadtr2th3.setAttribute("class","w3-border");
table1tehadtr2th4.setAttribute("class","w3-border");
table1tehadtr2th5.setAttribute("class","w3-border");
table1tehadtr2th6.setAttribute("class","w3-border");
table1tehadtr2th7.setAttribute("class","w3-border");
table1tehadtr2th8.setAttribute("class","w3-border w3-blue-grey");
table1tehadtr2th9.setAttribute("class","w3-border w3-blue-grey");
table1tehadtr2th10.setAttribute("class","w3-border w3-blue-grey");
table1tehadtr2th11.setAttribute("class","w3-border");
d1.appendChild(d5);
d5.appendChild(table1);
table1.appendChild(table1tehad);
table1tehad.appendChild(table1tehadtr1);
table1tehad.appendChild(table1tehadtr2);
table1tehadtr1.appendChild(table1tehadtr1th1);
table1tehadtr1.appendChild(table1tehadtr1th2);
table1tehadtr2.appendChild(table1tehadtr2th1);
table1tehadtr2.appendChild(table1tehadtr2th2);
table1tehadtr2.appendChild(table1tehadtr2th3);
table1tehadtr2.appendChild(table1tehadtr2th4);
table1tehadtr2.appendChild(table1tehadtr2th5);
table1tehadtr2.appendChild(table1tehadtr2th6);
table1tehadtr2.appendChild(table1tehadtr2th7);
table1tehadtr2.appendChild(table1tehadtr2th8);
table1tehadtr2.appendChild(table1tehadtr2th9);
table1tehadtr2.appendChild(table1tehadtr2th10);
table1tehadtr2.appendChild(table1tehadtr2th11);
table1tehadtr1th1.innerHTML="Vessel Name:- "+vesselname.value+" Shiftwise Loading Details";
table1tehadtr1th2.innerText="Quantity";
table1tehadtr2th1.innerText="Shipper Name";
table1tehadtr2th2.innerText="Invoice No";
table1tehadtr2th3.innerText="Job No";
table1tehadtr2th4.innerText="S/Bill No";
table1tehadtr2th5.innerText="Packing";
table1tehadtr2th6.innerText="Net";
table1tehadtr2th7.innerText="Gross";
table1tehadtr2th8.innerText="Bags";
table1tehadtr2th9.innerText="Nmt";
table1tehadtr2th10.innerText="Gmt";
table1tehadtr2th11.innerText="Hatch No";
var tbodytable1=document.createElement("tbody");
var tbodytable1tr=document.createElement("tr");
var tbodytable1trtd1=document.createElement("td");
var tbodytable1trtd2=document.createElement("td");
var tbodytable1trtd3=document.createElement("td");
var tbodytable1trtd4=document.createElement("td");
var tbodytable1trtd5=document.createElement("td");
var tbodytable1trtd6=document.createElement("td");
var tbodytable1trtd7=document.createElement("td");
var tbodytable1trtd8=document.createElement("td");
var tbodytable1trtd9=document.createElement("td");
var tbodytable1trtd10=document.createElement("td");
var tbodytable1trtd11=document.createElement("td");
tbodytable1trtd3.setAttribute("onclick","ajax12(this)");
tbodytable1tr.setAttribute("class","w3-pale-blue");
tbodytable1trtd1.setAttribute("class","w3-border");
tbodytable1trtd2.setAttribute("class","w3-border");
tbodytable1trtd3.setAttribute("class","w3-border");
tbodytable1trtd4.setAttribute("class","w3-border");
tbodytable1trtd5.setAttribute("class","w3-border");
tbodytable1trtd6.setAttribute("class","w3-border");
tbodytable1trtd7.setAttribute("class","w3-border");
tbodytable1trtd8.setAttribute("class","w3-border w3-blue-grey");
tbodytable1trtd9.setAttribute("class","w3-border w3-blue-grey");
tbodytable1trtd10.setAttribute("class","w3-border w3-blue-grey");
tbodytable1trtd11.setAttribute("class","w3-border w3-center");
tbodytable1trtd1.innerText=myObj1.shipper_name;
tbodytable1trtd2.innerText=myObj1.shippinginv;
tbodytable1trtd3.innerText=myObj1.jobno;
tbodytable1trtd4.innerText=myObj1.shippingbillno;
tbodytable1trtd5.innerText=myObj1.packing;
tbodytable1trtd6.innerText=myObj1.Net;
tbodytable1trtd7.innerText=myObj1.bagsweigh;
tbodytable1trtd8.innerText=myObj1.bags;
tbodytable1trtd9.innerText=myObj1.netweigh;
tbodytable1trtd10.innerText=myObj1.grossweigh;
tbodytable1trtd11.innerText=myObj1.Hatch_No;
table1.appendChild(tbodytable1);
tbodytable1.appendChild(tbodytable1tr);
tbodytable1tr.appendChild(tbodytable1trtd1);
tbodytable1tr.appendChild(tbodytable1trtd2);
tbodytable1tr.appendChild(tbodytable1trtd3);
tbodytable1tr.appendChild(tbodytable1trtd4);
tbodytable1tr.appendChild(tbodytable1trtd5);
tbodytable1tr.appendChild(tbodytable1trtd6);
tbodytable1tr.appendChild(tbodytable1trtd7);
tbodytable1tr.appendChild(tbodytable1trtd8);
tbodytable1tr.appendChild(tbodytable1trtd9);
tbodytable1tr.appendChild(tbodytable1trtd10);
tbodytable1tr.appendChild(tbodytable1trtd11);
tbodytable1trtd3.click();
tbodytable1trtd3.removeAttribute("onclick","ajax12(this)");
submitbutton.setAttribute("disabled","disabled");
});
}
}
xhttp.open("POST","/ajax11",true);
xhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhttp.send(fdata);
}这只是从数据库获取数据并创建第一个表的代码的一半，并基于此第一个表第二个 Ajax 调用触发器并创建另外三个表
解决方案
推荐阅读
- python - 如何使用第二个数据帧的列名和第一个数据帧的两列中的值匹配两个数据帧
- sql - 使用 Databricks 中的原始 SQL 直接查询存储在 Azure Data Lake 中的 avro 数据文件
- python - 如何使用 BeautifulSoup 获取列表中文章的链接
- javascript - ReactJS 使用 setState() 处理对象数组
- django - 根据记录的用户权限创建带有字段的视图
- c++ - 如何使用共享库中的地址检测 4K 别名？
- javascript - 表单提交成功时如何使用onSuccess()？
- python - Google Drive 在共享云端硬盘中创建新文件夹
- ios - iOS 13 UNNotificationAction 按钮未显示
- c++ - C++ 返回一个对象的变量