526互联

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

发布时间 2023-05-26 14:46:54作者: 深巷漫步

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);
      }

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