H5 页面中下载文件在Android 和 Ios 上的区别及坑点

1、使用a标签,需加上download (下载文件的名称)属性才行。

  区别:

      一: 在 Android上可以下载。
      二: 在Ios 上是直接打开文件。
2、使用浏览器自带的下载文件的功能,将文件转为二进制的数据流,代码如下:  

复制代码
 axios({
          url,
          method: "get",
          resposeType: "arraybuffer"
        }).then(res => {
          console.log(res)
          const { data, headers } = res;
          const fileName = transFileUrl(url)   // 文件名称
          saveImage(data, headers, fileName)
        })
      }

      const transFileUrl = (url) => {
        return url && url.slice(url.lastIndexOf('/') + 1)
      }

      const saveImage = (data, headers, fileName) => {
        const blob = new Blob([data], { type: headers['content-type'] })   // 二进制数据流
        saveAs(blob, fileName)
      }

      const saveAs = (blob, fileName) => {
        const url = window.URL.createObjectURL(blob);   //  创建一个DOMString, 获取当前文件的一个内存URL
        const link = document.createElement("a");
        link.href = url;
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(url);
      }
复制代码

 以上为个人平日总结, 若有不足之处,还望各位包含,赐教。


  
  

posted @   深巷漫步  阅读(1792)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-05-26 修改第三方组件样式
/* 看板娘 */
点击右上角即可分享
微信分享提示