js-file-downloadfile是个什么第一个参数表示啥

来源：蜘蛛抓取(WebSpider) 时间：2020-04-14 04:40 标签： downloadfile是个什么

在 html5 中a 标签新增了 downloadfile是个什么 属性，包含该属性的链接被点击时浏览器会以下载文件方式下载 href 属性上的链接。示例： 


  

    1. 前端 js 下载实现与示例
  

  

    通过 javascript 动态创建一个包含 downloadfile是个什么 属性的 a 元素再触发点击事件，即可实现前端下载
  

  

  
    
    
  • 
      href 属性设置要下载的文件地址。这个地址支持多种方式的格式因此可以实现丰富的下载方法。
    
    • 
    
  • 
      downloadfile是个什么 属性设置了下载文件的名称但 href 属性为普通链接并且跨域时，该属性值设置多数情况下会被浏览器忽略
    
    • 
  

  

    1.1 普通连接下载示例
  

  

  

  

    data URI 是前缀为 data:scheme 的 URL，允许内容创建者在文档中嵌入小文件数据URI由四个部分组成：前缀（数据:)，指示数据类型的MIME类型如果非文本则为可选的base64令牌，数据本身：
  

  

  

    链接的 href 属性为 data URIs 时也可以实现文件内容的下载。示例：
  

  

  

  

  

    1.4 二进制内容下载
  

  

  

    1.5 前端下载方法示例
  

  

    综合上述讨论这里给出一个前端实现下载的 saveAs 方法的 TypeScript 示例：
  

  
 * 通过创建 a dom 对象方式实现前端文件下载
 * @param href 要下载的内容链接。当定义了 toBlob 时可以为纯文本或二进制数据(取决于 toBlob 格式


  

  

    downloadfile是个什么 屬性为 html5 新增内容，浏览器支持情况可参考：
  

  

    判断浏览器是否支持该属性只需要检测 a 标签是否存在 downloadfile是个什么 属性。示例：
  

  

  

    对于不支持的浏覽器只能另想他法或者予以降级处理了。
  

  

  

    前端下载更多的需求是因为内容产生于前端那么可以在后端实现一个这样的 API ，它在接收到前端发出的内容后返回下载格式的数据这种实现就不存在浏览器兼容问题。
  

  

    利用 serviceWorker 和 fetch API 截拦浏览器请求只需实现好约定逻辑，也可实现这种功能需求示例：
  

  

    在页面中，通过 fetch API 构造请求：
  

  

  

  

    提示：以上代码仅作思路示例未作实际应用测试。
  

  

  

    以上主要讨论的是纯前端实现下载保存文件的方法对于下载服务器文件，最简的方式就是 window.open(url) 和 location.href=url 了但是其的弊端也很明显，当出错时整个页面都会挂掉而且也无法获得下载状态与进度，下载时间稍长时体验相当不好
  

  

    下面介绍一下使用 xhr 和 fetch API 实现文件下载的方法。其主要思路为：将请求结果设为 Blob 类型然后采用前端下载保存 Blob 类型数据的方式实现下载。
  

  

    4.1 使用 xhr 下载远程服务器文件
  

  

  

  

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 downloadfile是个什么 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐