移动端H5文件下载

需求

在H5页面中添加下载按钮,点击按钮下载对应文件

常用方法:动态生成a标签,把链接地址给到href属性,触发一个click事件,进行下载 由于文件数据是通过接口请求回来的数据流,application/octet-stream类型,需要转换一下来使用:

download () {

let link = document.createElement('a')

link.style.display = 'none'

// 请求文件数据,返回类型为blob数据流,类型application/octet-stream

link.href = window.URL.createObjectURL(res.data)

link.download = ''//文件名

document.head.appendChild(link)

link.click()

document.head.removeChild(link)

}

在pc端上调试没有问题,但放到手机上测试时就会出现各种问题,比如点击下载后没有反应,异或是被识别为非法链接不给下载,又或是下载完成后的文件格式不对

在各方查找资料以及同事间讨论之后,发现直接用绝对地址进行下载可行!

download () {

let link = document.createElement('a')

link.style.display = 'none'

let url = `.....`//绝对地址

link.href = url

link.download = ''//文件名

document.head.appendChild(link)

link.click()

document.head.removeChild(link)

}

手机测试后发现没问题,只有uc浏览器不支持打开zip文件而弹出提示,无法下载

附上资料来源截图一张

相关文章

华为x5手机怎么截屏最简单

一只鹅多少斤,附养殖方法

加湿器哪个牌子好?推荐评测2025好物合集,涵盖全场景需求!