移动端H5下载文件

在移动端 H5 页面中实现文件下载功能，通常有几种常见的方法可以使用。这些方法各有优缺点，并且在不同浏览器和设备上的兼容性也有所不同。 ### 方法一：使用 `<a>` 标签动态触发下载 这是最常见的一种方式，通过创建一个隐藏的 `<a>` 标签并设置其 `href` 和 `download` 属性来触发下载操作。这种方式适用于大多数现代浏览器。 ```javascript function aDownload(url, fileName) { const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.download = fileName; link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` ### 方法二：使用 Blob 对象进行下载 当需要处理从服务器获取的二进制流数据时（例如通过 API 请求获得的 Blob 数据），可以通过 `Blob` 对象构造文件内容，然后生成临时 URL 来触发下载[^2]。 ```javascript function downloadByBlob(blob, fileName) { if (window.navigator.msSaveBlob) { // 兼容 IE 浏览器 window.navigator.msSaveBlob(blob, fileName); } else { const URL = window.URL || window.webkitURL; const url = URL.createObjectURL(blob); aDownload(url, fileName); } } ``` ### 方法三：结合 UniApp 实现跨平台兼容性 对于基于 UniApp 的项目，在请求后端接口获取文件流之后，可以将数据封装为 `Blob` 并使用上述方式生成临时链接完成下载。这种方法还支持携带 Token 进行身份验证，提高了安全性。 ```javascript export const downloadByBlob = async (res) => { try { const fileData = await getDownloadFileByTypeApi({ fileId: res.fileId }); const filename = `${res.fileName}`; const blob = new Blob([fileData], { type: `${fileData.fileType}` }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = filename; const body = document.getElementsByTagName("body")[0]; body.appendChild(a); a.click(); body.removeChild(a); window.URL.revokeObjectURL(url); } catch (error) { this.$u.toast(error); } }; ``` ### 方法四：通过 Form 表单提交方式 某些情况下，直接通过表单提交也可以实现文件下载，尤其是一些老旧或特定版本的移动浏览器可能对这种方式支持更好。 ```javascript function downloadHandle(url) { let form = document.getElementById('downloadForm'); if (!form) { form = document.createElement('form'); form.setAttribute('id', 'downloadForm'); document.getElementsByTagName('body')[0].appendChild(form); } form.action = url; form.submit(); } ``` 以上提到的方法可以根据具体需求选择合适的方式应用到实际开发过程中。需要注意的是，不同的浏览器对于 `download` 属性的支持程度以及对跨域资源的处理可能会有所差异，因此建议在目标环境中充分测试每种方法的效果。