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

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

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

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

HTML

    
        form {
            color: green;
        }
    

    

    
    
    
        GFG Username
        
        
    
  
    Submit
  
    
        const downloadPdf = document
            .querySelector("#download-pdf");
  
        const submitForm = document
            .querySelector("#submit-form");
  
        downloadPdf.addEventListener("click", () => {
  
            // Creating the element anchor that
            // will download pdf
            let element = document.createElement("a");
            element.href = "./GFG.pdf";
            element.download = "GFG.pdf";
  
            // Adding the element to body
            document.documentElement.appendChild(element);
  
            // Above code is equivalent to
            // <a href="path of file" download="file name"> 
  
            // onClick property, to trigger download
            element.click();
  
            // Removing the element from body
            document.documentElement.removeChild(element);
  
             // onClick property, to trigger submit form
            submitForm.click();
        });
    

  

输出：

提交时：

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

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

HTML

  

    
        form {
            color: green;
        }
    

  

    
    
    
        GFG username
        
        
    
  
    
        const myForm = document
            .querySelector("#my-form");
  
        const submitForm = document
            .querySelector("#submit-form");
  
        submitForm.addEventListener("click", () => {
  
            // Creating element to download pdf
            var element = document.createElement('a');
  
            // Setting the path to the pdf file
            element.href = 'GFG.pdf';
  
            // Name to display as download
            element.download = 'GFG.pdf';
  
            // Adding element to the body
            document.documentElement.appendChild(element);
  
            // Above code is quivalent to
            // <a href="path to file" download="download name"/>
  
            // Trigger the file download
            element.click();
  
            // Remove the element from the body
            document.documentElement.remove(element);
  
            // Submit event, to submit the form
            myForm.submit();
        });
    

  

输出：

提交时：