uniapp h5展示文件流

在 UniApp 的 H5 端展示文件流是一个较为常见的需求，尤其是在处理后端返回的文件（如 PDF、图片、文档等）时。由于 H5 端运行在浏览器环境中，因此需要利用浏览器的能力来解析和展示文件流。 ### 使用 `Blob` 和 `URL.createObjectURL` 对于从后端获取到的文件流（通常是 `ArrayBuffer` 或 `Blob` 类型），可以使用 `URL.createObjectURL` 方法将其转换为可以在页面上使用的 URL 地址，然后通过 `<iframe>`、`<img>`、`<a>` 或者自定义组件进行展示。 例如，假设你通过请求获取了一个 PDF 文件的二进制流： ```javascript uni.request({ url: 'https://example.com/api/getFile', method: 'GET', responseType: 'arraybuffer', // 必须设置为 arraybuffer 来接收二进制数据 success: (res) => { const blob = new Blob([res.data], { type: 'application/pdf' }); // 根据实际文件类型设置 MIME 类型 const url = URL.createObjectURL(blob); // 展示在 iframe 中 this.fileUrl = url; } }); ``` 在模板中使用 `<iframe>` 展示 PDF 文件： ```html <template> <view> <iframe :src="fileUrl" style="width:100%; height:600px;" /> </view> </template> <script> export default { data() { return { fileUrl: null }; } }; </script> ``` ### 图片文件流展示 如果是图片文件流，也可以类似地创建 `Blob URL` 并绑定到 `<img>` 标签： ```javascript uni.request({ url: 'https://example.com/api/getImage', method: 'GET', responseType: 'arraybuffer', success: (res) => { const blob = new Blob([res.data], { type: 'image/jpeg' }); const url = URL.createObjectURL(blob); this.imageUrl = url; } }); ``` 模板中使用方式如下： ```html <template> <view> <img :src="imageUrl" alt="展示图片" /> </view> </template> ``` ### 注意事项 - **MIME 类型必须正确**：创建 `Blob` 时需根据实际文件类型指定正确的 MIME 类型，否则浏览器可能无法正确解析。 - **兼容性问题**：虽然 `URL.createObjectURL` 在现代浏览器中广泛支持，但仍需注意部分老旧浏览器的兼容性[^2]。 - **内存管理**：使用完 `Blob URL` 后建议调用 `URL.revokeObjectURL(url)` 释放内存，避免内存泄漏。 ### 处理文件下载 如果希望用户直接下载该文件而不是在浏览器中预览，可以通过创建 `<a>` 标签并触发下载行为实现： ```javascript const blob = new Blob([res.data], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'example.pdf'; // 设置下载文件名 a.click(); URL.revokeObjectURL(url); // 释放对象 URL ``` ---