在将其作为数据发送到控制器之前从 ajax 中的 html 正文中删除 html 元素

Question

我有一个带有两个按钮“下载”和“发送邮件”的 JSP 页面。单击 Sendmail 按钮时，我正在调用一个 ajax 方法，该方法生成 HTML 正文的 pdf 并将其发送到后端（控制器）。

我尝试使用：

document.getElementById('reportbuttons').remove();

之前：

doc.addHTML(document.body, function() {....

其中“reportbuttons”是包含“sendmail”和“download”按钮的 div 标签的 id。但是，一旦单击“sendmail”按钮，这两个按钮都会消失。

function sendMail() { let doc = new jsPDF('p','pt','a4'); doc.setProperties({ title: ' Report PDF Document', subject: 'subject', author: 'XYZ', keywords: 'generated, javascript, web 2.0, ajax', creator: 'ABC ' }); doc.addHTML(document.body, function() { var data = doc.output('datauristring'); console.log(data); var reqJson = {}; reqJson.machineId = "<%=machineId%>"; reqJson.monthYear = "<%=monthYear%>"; reqJson.data = data; console.log(); $.ajax( { url : "sendMail/", type: "POST", dataType: 'json', data : JSON.stringify(reqJson), contentType: "application/json", success:function(data) { alert('mail sent successfully'); console.log(data); }, error: function(data) { } }); }); }

我想在生成的pdf中去掉这两个按钮，但是在jsp网页上应该不会消失。

Answer 1

不要在doc.addHTML(body,function(){})之前删除您的按钮，而是隐藏这两个按钮，并在您的 ajax 调用成功/错误响应时再次显示这两个按钮。

                 success:function(data)
                 {
                     alert('mail sent successfully');
                     console.log(data);
                     document.getElementById('reportbuttons').style.display ="block";

                 }, 
                 error: function(data)
                 {
                     document.getElementById('reportbuttons').style.display ="block";
                 }

更新：

创建文档的克隆并从克隆中删除元素，然后使用 ajax 将更新后的克隆发送到您的控制器。

  var itm = document;
  var cln = itm.cloneNode(true);
  cln.getElementById("reportbuttons").remove();