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 @ 2023-05-26 14:36  深巷漫步  阅读(1625)  评论(0编辑  收藏  举报
/* 看板娘 */