用JS创建本地文件的实用方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML5用JS创建本地文件方法》，聊聊，希望可以帮助到正在努力赚钱的你。

可通过Blob API、File API或FileSystem Access API在HTML5中创建本地文件：Blob API生成临时URL触发下载；File API可构造File对象用于上传；FileSystem Access API支持直接读写用户授权的本地文件系统。

如果您希望在HTML5环境中通过JavaScript的Blob或File API创建本地文件，则需要利用浏览器提供的API接口将数据封装为Blob对象，并通过URL.createObjectURL生成可访问的临时URL。以下是实现此功能的具体步骤：

一、使用Blob API创建本地文件

Blob对象表示不可变的、原始数据的类文件对象，可用于构造包含任意内容的文件。通过URL.createObjectURL可生成指向该Blob的临时URL，进而触发下载。

1、定义要写入文件的文本内容，例如：const content = "Hello, HTML5 Blob!"。

2、使用Blob构造函数创建Blob对象，指定内容和MIME类型：const blob = new Blob([content], {type: "text/plain"})。

3、调用URL.createObjectURL生成临时URL：const url = URL.createObjectURL(blob)。

4、创建a元素，设置href属性为该URL，并添加download属性指定文件名：const a = document.createElement("a"); a.href = url; a.download = "example.txt"。

5、将a元素添加到DOM并模拟点击触发下载：document.body.appendChild(a); a.click()。

6、调用URL.revokeObjectURL释放内存：URL.revokeObjectURL(url)。

二、使用File API结合input[type="file"]读取并重建文件

File API本身不直接支持“创建”新文件，但可通过File构造函数（需浏览器支持）或从已存在的File对象派生新File实例，常用于表单上传前修改文件元数据。

1、检查浏览器是否支持File构造函数：if (typeof File !== "undefined")。

2、准备原始内容与名称，例如：const content = new TextEncoder().encode("File API demo")。

3、创建Blob后转换为File对象：const file = new File([content], "demo.bin", {type: "application/octet-stream"})。

4、验证File对象属性：console.log(file.name, file.size, file.type)。

5、如需模拟文件输入，可借助DataTransfer构造虚拟文件列表：const dt = new DataTransfer(); dt.items.add(file)。

6、将虚拟文件列表赋值给input元素：const input = document.querySelector('input[type="file"]'); input.files = dt.files。

三、使用FileSystem Access API（现代浏览器专属）

FileSystem Access API允许网页直接访问用户选择的本地目录，实现真正的文件系统级读写操作，但需用户主动授权且仅限安全上下文（HTTPS或localhost）。

1、检测API可用性：if ("showSaveFilePicker" in window)。

2、调用showSaveFilePicker请求用户选择保存位置：const handle = await window.showSaveFilePicker({suggestedName: "output.txt"})。

3、获取可写文件流：const writable = await handle.createWritable()。

4、写入内容（支持ArrayBuffer或string）：await writable.write("Saved via FileSystem Access API")。

5、关闭流以完成写入：await writable.close()。

今天关于《用JS创建本地文件的实用方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！