Html怎样设置点击按钮进行下载

实现点击按钮进行文件下载我们要用到Html5的download标签或者js的自定义函数。

方法一:利用html5的download标签

download标签通利用a标签来储存需要下载的文件的位置,在download的value里面可以设置文件的名称,如果没有设置,a标签就会利用原始的文件。

用法:
<a download="filename">
filename就是你需要下载的文件的名称。
示例:
<!DOCTYPE html> 
<html> 
   <body> 
      <style> 
         p { 
         color: green; 
         } 
      </style> 
      <p>How to trigger a file download when  
         clicking an HTML button or JavaScript? 
      <p> 
         <!-- GFG is the name of the  
            file to be downloaded-->
         <!-- In order to run the code,  
            the location of the file  
            "geeksforgeeks.png" needs to  
            be changed to your local directory, 
            both the HTML and downloadable file  
            needs to be present in the same directory -->
         <a href="geeksforgeeks.png" download="GFG"> 
         <button type="button">Download</button> 
         </a> 
   </body> 
</html> 

方法二:利用js的自定义函数

  • 首先创建一个文本区域(textarea),所有的文本输入都将被发出。
  • 利用createElement属性创建a标签然后分配他的download和href属性。
  • encodeURIComponent将对所有具有特殊含义的内容进行编码,因此您可以将其用于uri的组件。

例如,如果我们有类似“Hello:Geek”的文本?“”中有特殊字符,因此encodeURIComponent将对它们进行编码并附加它以供进一步使用。

  • data:text/plain; charset=utf-8 是href的属性值(如href=“”),它指定该值必须是文本类型,并且具有utf-8类型编码。click()方法模拟鼠标单击元素。
  • 之后,我们只需使用来自textarea的文本和我们的文件名调用下载函数”GFG.txt文件“作为id为’btn’的输入按钮上的参数。
示例:
<!DOCTYPE html> 
<html> 
   <body> 
      <style> 
         p { 
         color: green; 
         } 
      </style> 
      <p> 
          How to trigger a file download when 
          clicking an HTML button or JavaScript? 
      <p> 
         <textarea id="text"> 
             Welcome to GeeksforGeeks 
         </textarea> 
         <br/> 
         <input type="button" id="btn" 
                value="Download" /> 
         <script> 
            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); 
         </script> 
   </body> 
</html> 
Share :
Tag :