📜  如何创建同时提交表单和下载 pdf 的按钮?

📅  最后修改于: 2021-11-03 10:40:07             🧑  作者: Mango

没有直接的方法可以同时下载和提交表单,但是如果我们控制表单提交,并且点击提交表单按钮,我们首先触发 PDF 下载,然后提交表单,我们就可以执行此任务。因此,我们可以遵循的方法来实现这一点在下面讨论:

方法一:在表单外创建提交表单按钮:

  • 首先,创建一个带有隐藏提交按钮的表单。
  • 为表单提交按钮提供 id 以使用 JS 访问它。
  • 在表单外创建一个按钮,并为其提供一个唯一的 id 以访问它。
  • 使用 createElement 属性创建一个锚标记并为其分配 href 和下载属性。
  • 之后,我们只需使用 onClick 属性在单击下载按钮时调用提交按钮单击事件。
HTML



    

    

    
    
    
                               
                  


HTML


  

    

  

    
    
    
                               
          


输出:

提交时:

方法2:在提交时禁用提交:更简单的方法可以是单击提交表单按钮禁用提交,并通过调用先下载PDF然后提交表单的函数手动提交。

  • 首先,创建一个属性 onsubmit 设置为 ‘return: false;’ 的表单,这实际上阻止了表单在单击提交按钮时提交。
  • 使用 createElement 属性创建一个锚标记并为其分配 href 和下载属性。
  • 之后,在触发我们创建的元素的下载后,我们只需调用表单上的提交事件来提交它。

HTML



  

    

  

    
    
    
                               
          

输出:

提交时: