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

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

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

.1 准备静态

html代码：

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

.2 准备下载所需要的包

import download from "downloadjs"

.3 js代码

    /** @paramsfilename: 文件名称fileurl: 文件路径*/realDown = () => {const { filename, fileurl, filetype } = this.props.location.statelet ua = navigator.userAgent.toLowerCase()if (ua.includes("mac")) {//iOS 将文件url转换为文件流 在下载this.downloadFun (api.fileUrl +fileurl +"?response-content-type=application/octet-stream",filename,)} else {//android 直接用插件的方法下载即可 download(api.fileUrl + fileurl)}}// 创建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 {var link = document.createElement("a")link.href = window.URL.createObjectURL(blob)link.download = fileNamelink.click()window.URL.revokeObjectURL(link.href) //释放内存}}

h5实现文件下载，兼容ios、android相关推荐

兼容iOS Android,React Native兼容iOS Android的TabBar
最近着手开发的一个兼容iOS.Android的TabBar.还在不断开发中! 欢迎fork,欢迎star. :p 自己捣鼓了个E文的readme,没啥难度凑合可看. react-native-tabs ...
android 仿ios tabs,React Native兼容iOS Android的TabBar
tabbar 最近着手开发的一个兼容iOS.Android的TabBar.还在不断开发中. 欢迎fork,欢迎star. :p 自己捣鼓了个E文的readme,没啥难度凑合可看. react-nati ...
vue微信H5自定义分享兼容ios、PC、安卓
1.安装微信sdk yarn add weixin-js-sdk // 安装依赖 // 或者在index.html引入<script src="https://res.wx.qq.co ...
H5一键复制兼容iOS
浏览器原生剪贴板 navigator.clipboard 1. 写入 navigator.clipboard.writeText navigator.clipboard.writeText('需要复制 ...
H5 集成微信自定义分享(兼容 ios android)
最近做 H5 集成微信分享踩了很多坑,多少辛酸泪只有经历了才能体会,仅以此篇文章记录其中的酸甜苦辣. 分享出去的效果大概是这样子的: 接到这个需求之后,因为之前也没有做微信相关开发的经验,于是查阅了一 ...
android 通达信数据接口,通达OA移动版完美兼容iOS/Android操作系统
时下,6亿网民的生活正因移动互联网的进步而悄然发生改变,时代大潮已经让移动办公成为了2014上半年最炙手可热的主流办公模式,一个明显的趋势就是移动OA将是未来企业信息化不可缺少的重要组成部分. 以移动 ...
纯css svg 改变图片颜色 ios android 小程序
本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhan ...
移动端h5兼容ios和Android
viewport <meta charset="utf-8">  ...
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案...
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...

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

h5实现文件下载，兼容ios、android相关推荐

最新文章

热门文章