在前端开发中，我们经常需要让用户下载或保存一些数据或文件。在使用 JavaScript 实现这个功能时，通常会遇到一个问题：如何指定要保存的文件名？
本文将介绍两种常见的方式来实现这个功能，并附上相应的示例代码。
方法一：使用 Blob 对象和 a 标签实现
第一种方法比较简单，只需要创建一个 Blob 对象，然后将其作为参数传递给 URL.createObjectURL() 方法生成一个 URL，最后将这个 URL 赋值给一个 <a> 标签的 download 属性即可。这样，当用户点击该链接时，浏览器就会自动下载并保存文件到本地。
示例代码如下：
-- -------------------- ---- ------- -------- ---------------------- --------- - ----- ---- - --- ------------- ----- --- - -------------------------- ----- ---- - ---------------------------- --------- - ---- ------------- - --------- -------------------------------- ------------- -
其中，data 参数是要保存的文件内容，可以是字符串、二进制数据等；fileName 参数则是要指定的文件名，例如 "file.txt"。
方法二：使用 FileReader 和 Blob 对象实现
第二种方法稍微复杂一些，需要使用 FileReader 对象来读取数据，然后再将读取到的数据作为参数传递给 Blob 对象。这种方法的好处在于，你可以在读取数据时对其进行处理，比如添加文件头或尾等。
示例代码如下：
-- -------------------- ---- -------
-------- ---------------------------- --------- -
----- ------ - --- -------------
------------- - ---------- -
----- ---- - --- ----------------------
----- --- - --------------------------
----- ---- - ----------------------------
--------- - ----
------------- - ---------
--------------------------------
-------------
--
---------------------------- --------------
-这里的 data 参数与第一种方法中的意义相同，都是要保存的文件内容。而 fileName 参数则是要指定的文件名。
总结
本文介绍了两种常见的 JavaScript 保存文件并指定文件名的方法，并给出了相应的示例代码。其中，第一种方法比较简单，使用起来也比较方便；而第二种方法则可以对文件内容进行处理，更加灵活。无论哪种方法，都可以轻松地实现前端下载和保存文件功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28655