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

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

百度了一堆,不是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)
    }
  • 1
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值