移动端H5文件下载

2024-06-26 05:19| 来源: 网络整理| 查看: 265

需求在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文件而弹出提示，无法下载

附上资料来源截图一张在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章