readWriteFileInH5
H5 端文件读写适配器,被 showFile 内部调用。
H5 文件能力有限:读仅支持 HTTP(S) URL;写通过触发浏览器下载实现。
前置依赖
typescript
interface FileInH5Deps {
fetch: Window['fetch']
Blob: Window['Blob']
createObjectURL: Window['URL']['createObjectURL']
revokeObjectURL: Window['URL']['revokeObjectURL']
createElement: Document['createElement']
body: Document['body']
FileReader: new () => FileReader
error: Console['error']
}| 依赖 | 说明 |
|---|---|
fetch | 读取远程文件 |
Blob / createObjectURL / revokeObjectURL | 构造下载链接 |
createElement / body | 创建并触发 <a download> |
FileReader | encoding: 'base64' 时转换 blob |
error | 错误日志 |
readFileInH5
函数签名
typescript
function readFileInH5(options: FileOptions, deps: FileInH5Deps): Promise<FileResult>参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
options.filePath | string | 是 | 必须以 http:// 或 https:// 开头 |
options.encoding | string | 否 | 'base64' 时返回 base64 字符串,否则返回文本 |
deps | FileInH5Deps | 是 | 环境依赖 |
返回值
| 类型 | 说明 |
|---|---|
Promise<FileResult> | 成功含 data;本地路径或非 URL reject |
writeFileInH5
函数签名
typescript
function writeFileInH5(options: FileOptions, deps: FileInH5Deps): Promise<FileResult>参数
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
options.filePath | string | 是 | 用于推导下载文件名(取最后一段路径) |
options.data | string | ArrayBuffer | 是 | 文件内容 |
deps | FileInH5Deps | 是 | 环境依赖 |
返回值
| 类型 | 说明 |
|---|---|
Promise<FileResult> | 成功含 savedFilePath(实际为下载文件名);缺参数 reject |
工作原理
- 读:
fetch拉取远程资源;base64编码时用FileReader.readAsDataURL并截取逗号后 payload。 - 读失败场景:非 HTTP(S) 路径直接 reject,提示 H5 不支持本地路径。
- 写:将
data包装为Blob,创建临时 object URL,插入隐藏<a>触发click()下载,随后移除节点并revokeObjectURL。 - H5 无法写入任意本地路径,「保存路径」仅为下载时的文件名。