h5实现文件下载，兼容ios、android

弃之

已于 2022-12-26 13:38:36 修改

阅读量2.3w

点赞数 1

文章标签： android ios javascript

于 2022-02-28 13:39:10 首次发布

本文链接：https://blog.csdn.net/weixin_44643019/article/details/123180326

版权

本文介绍如何使用H5实现文件下载，并确保兼容iOS和Android设备。在普通浏览器中直接操作，微信环境下则需要通过中转页引导用户在其他浏览器下载。文中包括HTML、所需资源准备以及JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该方法是基于在普通浏览器中，如果是在微信浏览器，要借助一个中转页，引导用户打开其他浏览器来下载。

百度了一堆，不是ios不兼容，就是android不兼容，只好自己拼凑一波记录一下，以免下次找不到了。

.1 准备静态

html代码：

        <div className={"source_down_btn"} onClick={this.realDown}>
          立即下载
        </div>

.2 准备下载所需要的包

import download from "downloadjs"

.3 js代码

    /** @params
        filename: 文件名称
        fileurl: 文件路径
    */
  realDown = () => {
    const { filename, fileurl} = this.props.location.state
    let ua = navigator.userAgent.toLowerCase()
    if (ua.includes("mac")) {
        //iOS 将文件url转换为文件流 在下载
      this.downloadFun (
          fileurl +
          "?response-content-type=application/octet-stream",
        filename,
      )
    } else {
        //android 直接用插件的方法下载即可 
      download(fileurl,filename)
    }
  }



  // 创建a标签 实现下载
  downloadFun = async (blobFile, fileName) => {
    let blob = new Blob([blobFile], {
      type: "application/pdf;charset=UTF-8",
    })
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName)
    } else {
      let link = document.createElement("a")
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
      window.URL.revokeObjectURL(link.href) //释放内存
    }
  }