单击 HTML 按钮或 JavaScript 时如何触发文件下载？

要在单击按钮时触发文件下载，我们将使用自定义函数或 HTML 5 下载属性。
方法 1：使用下载属性
下载属性只是使用一个锚标记来准备需要下载的文件的位置。可以使用属性值名称设置文件的名称，如果未提供，则将使用原始文件名。
句法

文件名：属性指定要下载的文件的名称。
例子：

html

   
      
      
How to trigger a file download when 
         clicking an HTML button or JavaScript?
      

         
         
         
         Download
         
   

输出：

方法 2：使用自定义 javascript函数

• 首先制作了一个文本区域，将发出所有文本输入。
• 使用 createElement 属性创建一个锚标记，然后为其分配下载和 href 属性。
• encodeURIComponent将对具有特殊含义的所有内容进行编码，因此您可以将它用于 URI 的组件。
  例如，如果我们有像“Hello: Geek ?”这样的文本，其中有特殊字符，因此 encodeURIComponent 将对它们进行编码并附加它以供进一步使用。
• 数据：文本/纯文本； charset=utf-8是href的属性值（如href=” “），它指定该值必须是文本类型并且使用UTF-8类型编码。 click() 方法模拟鼠标单击元素。
• 之后，我们只需使用来自 textarea 的文本和我们的文件名“GFG.txt”作为 ID 为“btn”的输入按钮上的参数调用我们的下载函数。

例子：

html

   
      
         p {
         color: green;
         }
      
      
          How to trigger a file download when
          clicking an HTML button or JavaScript?
      
                      Welcome to GeeksforGeeks
         
         
         
         
            function download(file, text) {
              
                //creating an invisible element
                var element = document.createElement('a');
                element.setAttribute('href', 
                'data:text/plain;charset=utf-8, '
                + encodeURIComponent(text));
                element.setAttribute('download', file);
              
                // Above code is equivalent to
                // <a href="path of file" download="file name">
              
                document.body.appendChild(element);
              
                //onClick property
                element.click();
              
                document.body.removeChild(element);
            }
              
            // Start file download.
            document.getElementById("btn")
            .addEventListener("click", function() {
                // Generate download of hello.txt 
                // file with some content
                var text = document.getElementById("text").value;
                var filename = "GFG.txt";
              
                download(filename, text);
            }, false);
         
   

输出：

方法 3：使用带有 Axios 库的自定义 javascript函数
在本例中，我们将使用 Axios 下载图像和文件。这需要一点 JavaScript 的中级知识才能工作，在本例中将使用Axios 库。

html

   
      Download Images using Axios
       
         .scroll { 
         height: 1000px; 
         background-color: white; 
         } 
      
   
   
      
       
         GeeksforGeeks 
      
       
      
          Download Image
      
       
         By clicking the download button 
         will generate a random image.
      
   
   
   
    
      function download(){
          axios({
              url:'https://source.unsplash.com/random/500x500',
              method:'GET',
              responseType: 'blob'
      })
      .then((response) => {
             const url = window.URL
             .createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'image.jpg');
                    document.body.appendChild(link);
                    link.click();
      })
      }
        
   

输出：

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。