Please enable Javascript to view the contents

JavaScript文件系统访问API教程 - 读取,编写和保存文件

 ·  ☕ 1 分钟

最简单的剪映字幕导出工具【http://jy.mzh.ren】 – 码中人

最近写的剪映字幕导出小工具,颇受欢迎。

今天了解到文件系统API(File System Access API - Web APIs | MDN ),虽然浏览器还没广泛支持,但我依文档,在chrome浏览器新增加了一个另存为的功能,欢迎大家使用。

https://caniuse.com/native-filesystem-api

前情提要

剪映 Pro 把字幕信息存储在本地的 json 文件,本质上就是将 json 转化成 srt 文件就行。

json 本来就是结构化的数据,可以很方便的转化成 JavaScript 对象,处理起来非常简单。

实现原理及步骤为:

  1. 通过 html5 FileReader API 读取本地 剪映字幕文件.json (不需要服务器支持)
  2. 将 json 文件转化成 srt 字幕文件字符串
  3. 通过 Blob 对象将 srt 字符串文本构造成文件,生成链接指向该文件,点击链接下载

FileReader 及 Blob 浏览器支持程度较高,是读写本地文件比较通用的方式。

而有了新的文件系统API,读写就更方便更直接。

访问文件

以下代码允许用户从文件选择器中选择一个文件或目录,测试返回的是文件还是目录。

分享

码中人
作者
码中人
Web Developer