UniApp跨平台文件下载全攻略：从Blob原理到多端兼容实现

1. 从需求到方案：为什么文件下载在混合开发中是个“坑”

做前端和移动端开发，尤其是用uniapp这类跨平台框架，文件下载这个功能点，乍一看很简单，不就是发个请求把数据存下来吗？但真上手做，尤其是在需要兼容App、H5、甚至各端小程序时，你会发现到处都是“坑”。用户点击下载，在iOS上可能一切正常，到了安卓某些机型上就报错；在微信浏览器里能下载，到了系统浏览器就失效；下载下来的文件，在App里能直接调用系统应用打开，到了H5端却只能干看着。

这些问题的根源，在于不同运行环境对文件系统的访问权限、Blob对象的处理方式、以及下载触发机制的差异巨大。uniapp虽然用一套代码编译多端，但涉及到系统级API，尤其是文件操作，它本质上是在各端原生能力上做了一层封装。如果你不理解这层封装下的原生逻辑，就会觉得API“时灵时不灵”。

最近在做一个项目，需要从服务端接收二进制流（比如PDF、Excel、图片），然后保存到用户设备，并支持预览。我本以为用uni.downloadFile加uni.saveFile就能搞定，结果在安卓App上保存成功但找不到文件，在H5端直接无法触发下载。折腾了一圈，把uniapp App端、H5端，以及纯Web环境下的方案都摸了一遍。这篇文章，我就把这些踩坑经验、不同场景下的核心方案、以及那些官方文档里没写的细节，给你彻底讲清楚。

2. 核心原理：Blob、Object URL与文件系统权限

在深入代码之前，我们必须先搞懂几个核心概念。不理解它们，你写的代码就是“玄学编程”，出了问题都不知道从哪查起。

2.1 Blob对象：二进制数据的“集装箱”

Blob（Binary Large Object）是浏览器环境（包括WebView）中表示二进制数据的一个关键对象。你可以把它想象成一个贴着标签的集装箱。服务端返回的二进制流（ArrayBuffer），就是这个集装箱里的“货物”。我们创建一个Blob对象，就是把这个货物装进集装箱，并贴上MIME类型（如application/pdf）这个“标签”。

// 假设从网络请求获得一个 ArrayBuffer const arrayBuffer = await someApi.getFileData(); // 创建一个Blob“集装箱”，并贴上“pdf”标签 const blob = new Blob([arrayBuffer], { type: 'application/pdf' });

这个“标签”至关重要，它决定了操作系统和应用程序如何识别这个文件。如果你把一个PDF数据标成了image/jpeg，那系统就会试图用图片查看器打开它，结果自然是乱码或失败。

2.2 Object URL：本地文件的“临时通行证”

Blob对象存在于内存中，我们无法直接用一个像https://example.com/file.pdf这样的网络地址来访问它。这时就需要URL.createObjectURL(blob)。这个API会生成一个以blob:开头的本地URL（例如blob:https://your-app.com/550e8400-e29b-41d4-a716-446655440000）。

这个URL可以像普通网络URL一样，被用于<a>标签的href、<img>的src，或者<iframe>的地址。浏览器会负责将这个URL映射到内存中的Blob数据。但请注意，它是一个“临时通行证”。这个URL的生命周期和创建它的文档绑定，如果你不手动释放（URL.revokeObjectURL(url)），它可能会一直占用内存，直到页面卸载。在单页面应用（SPA）或频繁下载的场景中，这可能导致内存泄漏。

2.3 各端文件系统权限的“天壤之别”

这是所有混乱的根源：

• 纯H5（浏览器环境）：沙盒限制最严。JavaScript无法直接读写用户磁盘上的任意文件。下载行为必须由用户主动触发（如点击一个链接或按钮），并且文件保存的位置和名称最终由浏览器的下载管理器决定，开发者控制力很弱。
• UniApp App端（渲染在WebView中）：通过桥接（JSBridge）调用原生能力。uni.downloadFile和uni.saveFile最终调用的是安卓的DownloadManager或iOS的文件管理API。它拥有比浏览器更高的权限，可以将文件保存到App的私有目录或公共目录（如相册、下载文件夹），但这需要相应的原生模块支持和权限声明（如安卓的WRITE_EXTERNAL_STORAGE）。
• 小程序环境：限制更多。它有自己的一套文件系统，文件通常保存在小程序沙盒内。下载用wx.downloadFile，保存用wx.saveFile，但保存后的文件路径是临时或永久的，打开文件可能需要用wx.openDocument（针对文档）或先保存到相册再打开。

理解这三者的差异，是选择正确方案的前提。你不能指望一个在H5里能用的<a>标签下载，在App里也能正常保存到指定目录。

3. UniApp App端完整实现：下载、保存与打开

在UniApp打包的移动App中，我们拥有最强大的控制能力。核心API链是：uni.downloadFile->uni.saveFile->uni.openDocument或uni.saveImageToPhotosAlbum。

3.1 第一步：使用uni.downloadFile获取文件

这个API的作用是将网络资源下载到本地临时路径。这里最大的坑是：临时文件可能随时被系统清理！所以你不能把临时路径当作最终结果。

uni.downloadFile({ url: 'https://example.com/report.pdf', // 你的文件地址 success: (res) => { if (res.statusCode === 200) { // res.tempFilePath 是下载后的临时文件路径 console.log('下载成功，临时路径：', res.tempFilePath); this.savePermanentFile(res.tempFilePath); // 必须立即转存 } else { uni.showToast({ title: `下载失败: ${res.statusCode}`, icon: 'none' }); } }, fail: (err) => { console.error('下载请求失败：', err); uni.showToast({ title: '网络请求失败', icon: 'none' }); } });

注意：uni.downloadFile的url必须配置在项目的manifest.json->App模块配置->Download白名单中，或者在服务器端确保该域名支持跨域（CORS）。否则在App端可能会静默失败。

3.2 第二步：使用uni.saveFile保存到本地

获取到临时文件路径后，必须立即将其保存到永久存储位置。这里需要区分文件类型，因为图片和文档的保存与打开方式不同。

保存通用文件（PDF、Word等）：

async savePermanentFile(tempFilePath) { try { const saveRes = await uni.saveFile({ tempFilePath: tempFilePath }); // savedFilePath 是持久化后的文件路径 console.log('文件保存成功，持久路径：', saveRes.savedFilePath); // 接下来可以调用打开文件的逻辑 this.openDocument(saveRes.savedFilePath); } catch (saveErr) { console.error('保存文件失败：', saveErr); uni.showToast({ title: '保存文件失败', icon: 'none' }); } }

保存图片到系统相册：如果你想将下载的图片保存到用户相册，需要使用另一个API，并且在安卓端需要动态申请存储权限。

async saveImageToAlbum(tempFilePath) { // #ifdef APP-PLUS // 安卓权限检查（iOS通常不需要） if (uni.getSystemInfoSync().platform === 'android') { const status = await uni.authorize({ scope: 'scope.writePhotosAlbum' }); if (status.errMsg !== 'authorize:ok') { uni.showModal({ content: '需要您授权保存到相册', success: (modalRes) => { if (modalRes.confirm) { uni.openSetting(); // 引导用户去设置页打开 } } }); return; } } // #endif uni.saveImageToPhotosAlbum({ filePath: tempFilePath, success: () => uni.showToast({ title: '已保存到相册' }), fail: (err) => { console.error(err); // 常见错误：用户拒绝授权、文件路径无效、文件不是图片等 uni.showToast({ title: '保存到相册失败', icon: 'none' }); } }); }

3.3 第三步：使用uni.openDocument打开文件

文件保存好后，如何让用户查看？对于文档类文件，uni.openDocument是首选。它能调用系统已安装的应用（如WPS、苹果的“文件”预览、各类PDF阅读器）来打开文件。

openDocument(savedFilePath) { uni.openDocument({ filePath: savedFilePath, fileType: 'pdf', // 根据文件类型指定，可选值：pdf, doc, docx, xls, xlsx, ppt, pptx showMenu: true, // 是否显示右上角菜单，可用于分享、用其他应用打开等 success: () => console.log('打开文档成功'), fail: (err) => { console.error('打开文档失败：', err); // 可能原因：1. 文件路径错误 2. 系统没有能打开此类型文件的应用 uni.showToast({ title: '打开失败，请检查是否安装了相关应用', icon: 'none' }); } }); }

一个关键细节：fileType参数很重要。在iOS上，正确的fileType能帮助系统更快地找到合适的应用。如果你不确定类型，可以尝试不传，但指定类型成功率更高。

3.4 App端完整代码示例与避坑指南

将以上步骤串联起来，一个健壮的App端文件下载处理函数如下：

// 在Vue methods或Composition API中 async handleDownloadInApp(fileUrl, fileName, fileType = 'pdf') { uni.showLoading({ title: '下载中...', mask: true }); try { // 1. 下载到临时目录 const downloadRes = await uni.downloadFile({ url: fileUrl }); if (downloadRes.statusCode !== 200) { throw new Error(`下载失败，状态码：${downloadRes.statusCode}`); } // 2. 保存到永久目录 const saveRes = await uni.saveFile({ tempFilePath: downloadRes.tempFilePath }); const permanentPath = saveRes.savedFilePath; uni.hideLoading(); uni.showToast({ title: '下载完成', icon: 'success' }); // 3. 询问用户是否立即打开 uni.showModal({ title: '提示', content: `文件“${fileName}”已下载完成，是否立即打开？`, success: (modalRes) => { if (modalRes.confirm) { this.openDocument(permanentPath, fileType); } } }); } catch (error) { uni.hideLoading(); console.error('下载流程出错：', error); uni.showToast({ title: `操作失败：${error.message || '未知错误'}`, icon: 'none', duration: 3000 }); } }, openDocument(filePath, fileType) { uni.openDocument({ filePath: filePath, fileType: fileType, showMenu: true, fail: (err) => { // 如果打开失败，提示用户文件位置，让其用其他方式打开 uni.showModal({ title: '打开失败', content: `系统无法直接打开此文件。文件已保存至：${filePath}，您可以尝试用其他应用打开它。`, showCancel: false }); } }); }

避坑要点：

1. 临时文件是“易失的”：uni.downloadFile成功后，必须立即处理tempFilePath，不要存储这个路径以备后用，它可能很快失效。
2. 权限问题（安卓）：保存到公共目录或相册需要权限。务必在manifest.json的App权限配置中勾选所需权限（如<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>），并在代码中进行动态申请和友好提示。
3. 文件类型匹配：确保uni.openDocument的fileType与文件实际类型匹配，否则在某些系统上可能无法唤起正确应用。
4. 网络与存储空间：大文件下载时，要考虑网络中断和存储空间不足的情况，可以增加进度监听和异常重试机制。

4. H5端实现方案：处理二进制流与触发下载

在H5环境（包括UniApp打包的H5，以及在微信小程序WebView中运行的H5页面），我们没有直接的文件系统API。核心思路是：将二进制流转换为Blob，生成Object URL，然后模拟一个点击事件触发浏览器的下载对话框。

4.1 从服务端获取二进制流

假设你的API接口返回的是文件二进制流（ArrayBuffer），你需要使用支持响应类型的请求库。uni.request默认返回文本，需要配置。

// 使用 uni.request (需要配置 responseType) async fetchFileAsBlob(url) { return new Promise((resolve, reject) => { uni.request({ url: url, method: 'GET', responseType: 'arraybuffer', // 关键！告诉框架我们需要二进制数据 success: (res) => { if (res.statusCode === 200) { // 在H5端，res.data 可能是 ArrayBuffer // 在某些小程序环境或特定配置下，可能是 base64 字符串，需要判断 let data = res.data; if (typeof data === 'string') { // 如果是base64，需要转换（这里假设是标准的带前缀的base64） const binaryString = atob(data.split(',')[1]); const bytes = new Uint8Array(binaryString.length); for (let i = 0; i < binaryString.length; i++) { bytes[i] = binaryString.charCodeAt(i); } data = bytes.buffer; } resolve(data); } else { reject(new Error(`请求失败: ${res.statusCode}`)); } }, fail: reject }); }); } // 或者使用更现代的 fetch API (在支持的环境下更简洁) async fetchFileAsBlobWithFetch(url) { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.arrayBuffer(); // 直接获取 ArrayBuffer }

4.2 创建Blob并触发下载

获取到ArrayBuffer后，创建Blob，生成链接，并模拟点击。

/** * 在H5端下载二进制流文件 * @param {ArrayBuffer} arrayBuffer - 文件二进制数据 * @param {string} fileName - 下载的文件名，如 'report.pdf' * @param {string} mimeType - 文件的MIME类型，如 'application/pdf' */ function downloadBlobInH5(arrayBuffer, fileName, mimeType) { // 1. 创建Blob对象 const blob = new Blob([arrayBuffer], { type: mimeType }); // 2. 创建Object URL const blobUrl = window.URL.createObjectURL(blob); // 3. 创建隐藏的<a>标签 const link = document.createElement('a'); link.href = blobUrl; link.download = fileName; // 指定下载的文件名 link.style.display = 'none'; // 4. 将链接添加到DOM中（某些浏览器需要） document.body.appendChild(link); // 5. 模拟点击触发下载 link.click(); // 6. 清理：移除DOM元素并释放Object URL document.body.removeChild(link); window.URL.revokeObjectURL(blobUrl); console.log(`已触发下载: ${fileName}`); }

4.3 处理跨域与网络请求问题

H5下载最大的敌人是跨域（CORS）和请求头配置。

• CORS：如果你的文件资源所在服务器没有正确配置CORS响应头（如Access-Control-Allow-Origin: *或你的域名），浏览器会阻止前端JavaScript读取响应内容，即使你能在地址栏直接打开这个文件。此时response.data可能为空或报错。解决方案必须由后端同学在服务器上配置。
• 响应头Content-Disposition：一个更可靠的方式是让服务端在响应头中设置Content-Disposition: attachment; filename="report.pdf"。这样，即使用户直接访问文件URL，浏览器也会弹出下载框，而不是尝试预览。前端只需要一个普通的<a>标签链接即可，无需复杂的Blob操作。但这要求你完全控制服务端。

4.4 兼容性与边界情况处理

上面的基础方法在大多数现代浏览器中有效，但仍需考虑以下情况：

1. iOS Safari的兼容性问题：旧版本iOS Safari对download属性支持有限，可能无法正确命名文件，或者对于某些MIME类型（如PDF）会尝试在新标签页打开而不是下载。一个备选方案是使用window.open(blobUrl, '_blank')，但这失去了文件名控制。
2. 大文件内存问题：如果文件非常大（比如几百MB），将整个ArrayBuffer读入内存再创建Blob，可能导致浏览器标签页内存暴增甚至崩溃。对于大文件，理想情况是让服务端支持Range请求（断点续传），或者直接使用带有download属性的<a>标签指向文件URL，让浏览器接管整个下载过程。
3. 微信内置浏览器（X5内核）：可能会有些许行为差异，但基本方案是通用的。需要注意的是，微信环境可能会拦截某些类型的自动下载，确保下载动作是由用户触发的（如点击按钮）。
4. Blob URL回收：务必在触发下载后调用URL.revokeObjectURL()。否则，这个Blob对象会一直留在内存中，直到页面关闭，在单页应用中可能导致严重的内存泄漏。

一个更健壮的H5下载函数，可以考虑添加这些兼容性处理：

function downloadBlobInH5Robust(blob, fileName) { const blobUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = blobUrl; // 优先使用 download 属性 if ('download' in link) { link.download = fileName; link.click(); } else { // 对于不支持 download 属性的浏览器（如某些旧版Safari），尝试在新窗口打开 // 注意：这通常会导致文件被浏览器直接打开而非下载 window.open(blobUrl, '_blank'); // 可以给用户一个提示 setTimeout(() => { alert(`您的浏览器不支持直接下载。文件已在新窗口打开，请使用浏览器的“另存为”功能保存文件。`); }, 500); } // 延迟释放URL，确保点击事件已触发 setTimeout(() => { URL.revokeObjectURL(blobUrl); }, 100); }

5. 在UniApp中实现多端兼容的统一封装

在实际项目中，我们通常需要一套代码同时跑在App和H5上。这就需要我们对平台进行判断，并执行不同的逻辑。UniApp提供了条件编译的语法。

5.1 使用条件编译进行平台判断

我们可以封装一个通用的downloadFile方法：

// utils/fileDownload.js export const downloadFile = async (options) => { const { url, fileName, fileType = 'pdf', mimeType = 'application/octet-stream' } = options; // #ifdef APP-PLUS // App端逻辑 return downloadForApp(url, fileName, fileType); // #endif // #ifdef H5 // H5端逻辑 return downloadForH5(url, fileName, mimeType); // #endif // #ifdef MP-WEIXIN // 小程序端逻辑（此处略，小程序有自己的API wx.downloadFile 和 wx.saveFile） console.warn('小程序端文件下载逻辑需单独实现'); // #endif }; // App端实现 async function downloadForApp(url, fileName, fileType) { uni.showLoading({ title: '下载中' }); try { const downloadRes = await uni.downloadFile({ url }); if (downloadRes.statusCode !== 200) throw new Error(`下载失败: ${downloadRes.statusCode}`); const saveRes = await uni.saveFile({ tempFilePath: downloadRes.tempFilePath }); uni.hideLoading(); uni.showToast({ title: '已保存', icon: 'success' }); // 返回保存后的路径，供调用者决定是否打开 return { savedFilePath: saveRes.savedFilePath, platform: 'app' }; } catch (error) { uni.hideLoading(); uni.showToast({ title: `失败: ${error.message}`, icon: 'none' }); throw error; } } // H5端实现 async function downloadForH5(url, fileName, mimeType) { uni.showLoading({ title: '准备下载' }); try { // 使用 fetch 获取 ArrayBuffer const response = await fetch(url); if (!response.ok) throw new Error(`网络错误: ${response.status}`); const arrayBuffer = await response.arrayBuffer(); const blob = new Blob([arrayBuffer], { type: mimeType }); const blobUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = blobUrl; link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); // 延迟释放 setTimeout(() => URL.revokeObjectURL(blobUrl), 100); uni.hideLoading(); uni.showToast({ title: '下载已开始', icon: 'success' }); return { platform: 'h5' }; } catch (error) { uni.hideLoading(); uni.showToast({ title: `下载失败: ${error.message}`, icon: 'none' }); throw error; } }

5.2 在页面中使用统一接口

在Vue页面中，你可以这样调用：

<template> <view> <button @click="handleDownload">下载文件</button> </view> </template> <script> import { downloadFile } from '@/utils/fileDownload.js'; export default { methods: { async handleDownload() { const options = { url: 'https://your-server.com/path/to/file.pdf', fileName: '项目报告.pdf', fileType: 'pdf', // App端打开文档用 mimeType: 'application/pdf' // H5端创建Blob用 }; try { const result = await downloadFile(options); // 如果是App端下载成功，可以询问是否打开 if (result.platform === 'app' && result.savedFilePath) { uni.showModal({ title: '提示', content: '文件已保存，是否立即打开？', success: (res) => { if (res.confirm) { uni.openDocument({ filePath: result.savedFilePath, fileType: options.fileType }); } } }); } } catch (error) { // 错误已在工具函数中处理，这里可进行额外日志上报等 console.error('下载流程最终失败:', error); } } } }; </script>

这种封装方式，使得业务代码非常清晰，无需关心底层是App还是H5。条件编译保证了代码只会被编译到对应的平台，不会产生冗余代码或语法错误。

6. 进阶话题：大文件、断点续传与进度反馈

对于小文件，上述方案足够了。但对于视频、大型安装包等文件，我们需要更复杂的策略。

6.1 大文件分片下载与Blob合并

在H5端，一次性下载几个G的文件到内存中是不现实的。我们可以利用HTTP的Range头进行分片下载，然后合并。

async function downloadLargeFile(url, fileName, chunkSize = 1024 * 1024) { // 默认1MB一片 // 1. 获取文件总大小 (HEAD请求) const headRes = await fetch(url, { method: 'HEAD' }); const totalSize = parseInt(headRes.headers.get('Content-Length'), 10); const chunks = []; // 2. 分片下载 for (let start = 0; start < totalSize; start += chunkSize) { const end = Math.min(start + chunkSize - 1, totalSize - 1); const chunkRes = await fetch(url, { headers: { 'Range': `bytes=${start}-${end}` } }); const chunkBlob = await chunkRes.blob(); chunks.push(chunkBlob); // 更新进度 const progress = ((start + chunkSize) / totalSize * 100).toFixed(1); console.log(`下载进度: ${progress}%`); // 可以在这里更新UI进度条 } // 3. 合并Blob const fullBlob = new Blob(chunks); // 4. 触发下载（使用前面定义的downloadBlobInH5函数） downloadBlobInH5(fullBlob, fileName, headRes.headers.get('Content-Type') || 'application/octet-stream'); }

注意：此方法需要服务器支持Range请求（返回206 Partial Content状态码）。合并大量Blob在内存中进行，对于超大文件仍有压力，更优的方案是使用Streams API，但兼容性要求较高。

6.2 App端的进度监听

UniApp的uni.downloadFile支持进度监听，这对于大文件下载体验至关重要。

const downloadTask = uni.downloadFile({ url: 'https://example.com/large-video.mp4', success: (res) => { /* ... */ }, fail: (err) => { /* ... */ } }); // 监听进度变化 downloadTask.onProgressUpdate((res) => { console.log(`下载进度：${res.progress}%`); console.log(`已下载：${res.totalBytesWritten}字节，总计：${res.totalBytesExpectedToWrite}字节`); // 更新UI中的进度条 this.progress = res.progress; }); // 如果需要取消下载 // downloadTask.abort();

6.3 断点续传的实现思路

断点续传能极大提升大文件下载的用户体验。核心思路是：

1. 在本地（如uni.setStorageSync）记录每个文件的已下载字节数。
2. 下载开始时，先读取本地记录，然后设置请求头Range: bytes=${已下载字节数}-。
3. 服务器从指定位置开始返回数据。
4. 下载过程中，定期更新本地记录的已下载字节数。
5. 如果下载中断，下次可以从断点处继续。

这需要前后端配合：后端必须支持Range请求，前端需要妥善管理下载状态。在App端，可以利用uni.getSavedFileList和uni.getSavedFileInfo来管理已下载的文件片段，但这实现起来较为复杂，通常对于超大文件下载，更推荐使用专门的原生插件或模块。

7. 实战中遇到的“坑”与解决方案

最后，分享几个我实际开发中遇到的典型问题及解决办法。

坑1：安卓App下载文件后，在系统文件管理器里找不到。

• 原因：uni.saveFile默认可能将文件保存在App的私有目录（/data/data/包名/），这个目录对用户和别的App是不可见的。
• 解决方案：使用uni.saveFile的filePath参数，指定保存到公共目录。但需要注意路径格式和权限。

  // 在安卓上，尝试保存到下载目录 // #ifdef APP-PLUS && ANDROID const downloadDir = plus.io.convertLocalFileSystemURL('_downloads/'); // 或 '_documents/' const fullPath = `${downloadDir}${fileName}`; // 注意：plus.io API是HTML5+的原生API，需确保使用正确 // 更稳妥的方式是使用uni.saveFile成功后，再用原生API将文件移动到公共目录 // #endif

  更通用的做法是，保存后使用uni.openDocument打开，用户可以通过右上角菜单选择“用其他应用打开”或“保存到...”，将文件复制到公共位置。

坑2：H5下载时，Chrome浏览器文件被拦截。

• 原因：Chrome等浏览器会拦截非用户主动触发的下载（即程序自动触发的link.click()）。如果你的下载调用是在一个异步回调（如setTimeout或Promise的then中）深处，浏览器可能认为这不是用户意图。
• 解决方案：确保下载动作是由一个直接的、同步的用户事件（如点击按钮）所触发的。将创建Blob和Object URL的逻辑放在事件处理函数中，但触发click()的动作必须与事件在同一调用栈中。如果必须在异步操作后下载，可以提前创建一个隐藏的按钮，在异步完成后“模拟”用户点击这个按钮。

坑3：iOS上打开文件提示“没有应用可以打开此文件”。

• 原因：uni.openDocument的fileType参数不正确，或者文件扩展名与MIME类型不匹配，导致系统无法识别。
• 解决方案：
  1. 确保fileType参数传递正确。对于未知类型，可以尝试不传或传''。
  2. 确保保存的文件路径有正确的扩展名。虽然uni.saveFile不依赖扩展名，但系统关联文件类型时会看扩展名。可以在保存前检查一下。
  3. 在iOS上，某些文件类型（如.rar, .7z）系统确实没有默认应用。可以引导用户安装相应的App（如“解压大师”），或者在你的App内集成解压库（这很复杂）。

坑4：下载二进制流时，后端返回的是Base64字符串。

• 原因：某些后端框架或网关默认将二进制数据编码为Base64返回，或者请求头Accept设置不当。
• 解决方案：
  1. 前端处理：如前面代码所示，判断res.data类型，如果是字符串且符合Base64特征，则先进行atob解码转成ArrayBuffer。
  2. 后端协商：更根本的解决方法是让后端API直接返回二进制流（Content-Type: application/octet-stream或具体的MIME类型），并在响应头中设置Content-Disposition。前端请求时设置responseType: 'arraybuffer'。

文件下载这个功能，看似简单，实则涉及网络请求、数据转换、平台API、用户权限、浏览器兼容性等多个层面的知识。希望这篇近万字的总结，能帮你把UniApp和H5中的文件下载、保存、打开这条链路彻底打通。在实际开发中，最重要的是理解不同环境的底层原理，然后根据你的具体场景（文件大小、目标平台、用户体验要求）选择最合适的方案，并做好充分的错误处理和用户提示。