文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止我的程序跳过html2pdf函数？

问如何防止我的程序跳过html2pdf函数？
EN

Stack Overflow用户

提问于 2021-02-08 21:34:42

回答 1查看 58关注 0票数 1

如何确保程序在返回true之前完全执行GenPDF？我曾尝试在GenPDF()函数的末尾向checkForMissingFields()函数返回一个变量，但程序仍然跳过GenPDF函数的中间部分，立即将变量返回给checkForMissingFields()函数。

我还尝试在调用GenPDF函数后使用延迟，但它只会延迟页面的重定向。

这是我使用的库：https://github.com/eKoopmans/html2pdf.js

HTML表单：

<form
  id="form"
    class="ui form"
    action="/PageTwo"
    method="POST"
    onsubmit="return checkForMissingFields()"
  >
 <tr>
      <td>Name of checklist:</td>
      <td>
        <input
          type="text"
          name="checklist[AuditFormName]"
          placeholder="Name"
          id="AuditFormName"
        />
      </td>
    </tr>
    <tr>
      <td>Select Instituion:</td>
      <td>
        <select
          name="checklist[SelectedInstituion]"
          class="questionsInstitution"
          id="SelectedInstituion"
          onchange="updateRetailTenants()"
        >
          <option value="default"></option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Select Retail Tenant:</td>
      <td>
        <select
          name="checklist[SelectedRetailTenant]"
          class="questionsRetailTenant"
          id="SelectedTenant"
          style="width: 200px"
        >
          <option value="default"></option>
        </select>
      </td>
    </tr>
    <tr>
     <td>Send a copy of this checklist?</td>
      <input type="checkbox" Id="SendCopy" value="off" 
    </tr>
    <table>
      <input
        type="hidden"
        name="checklist[sessionEmail]"
        value="<%=sessionLogin %>"
      />
     
......
</form>

Javascript：

<script src='https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js'></script>
 <script scr='script.js'></script>
<script>
   // var form = getElementById('form')
function GenPDF(){
      var name= document.getElementById('Name')
      var element = document.getElementById ('form');
      var opt = {
          margin:       1,
          filename:     name+'.pdf',
          image:        { type: 'png', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'landscape' }
      };


    html2pdf().set(opt).from(element).save();

}

function checkForMissingFields() {
      if (document.getElementById("Name").value.length == 0) {
        alert("Name field cannot be blank");
        return false;
      } 
      else{
        GenPDF();
        return true;
      }
}
      
</script>

javascript

html

asynchronous

html2pdf

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-08 22:20:56

您需要event.preventDefault(); working demo

// var form = getElementById('form')
function GenPDF() {
  var name = document.getElementById('Name').value;
  var element = document.getElementById('form');
  var opt = {
    margin: 1,
    filename: name + '.pdf',
    image: {
      type: 'png',
      quality: 0.98
    },
    html2canvas: {
      scale: 2
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'landscape'
    }
  };

  html2pdf().set(opt).from(element).save();

}

function checkForMissingFields(event) {
  // event.preventDefault(); // <== completely cancel submit
  if (document.getElementById("Name").value.length == 0) {
    event.preventDefault();
    alert("Name field cannot be blank");
    return false;
  } else {
    GenPDF();
    // then submit the form
    return true;
  }
}

<script src='https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js'></script>

<form id="form" class="ui form" action="/PageTwo" method="POST" 
   onsubmit="checkForMissingFields(event)">

  <input type="text" id="Name">
  <button>submit</button>

</form>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66102694

复制

相似问题

问如何防止我的程序跳过html2pdf函数？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止我的程序跳过html2pdf函数？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止我的程序跳过html2pdf函数？
EN