在前端开发中，我们可以使用数据URI（Data URI scheme）来将小型图片或文件嵌入到HTML、CSS或JavaScript代码中。使用数据URI可以减少HTTP请求次数，提高页面加载速度和用户体验。但是，在使用数据URI时，如果没有明确指定文件名，那么该数据URI就会默认为“未命名文件”，对于后续的代码维护和调试可能会带来不便。那么，是否有任何方法可以指定建议的文件名呢？下面我们将一一介绍。
方法一：通过MIME类型指定文件名
在数据URI的格式中，我们可以通过MIME类型指定文件扩展名，并在URL中附上文件名。例如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAArElEQVQ4T2NkoBAwUqifmK/n5+RyOSvAf//p7e1tZrj3xcVdYHJlXx58/fNGcB1GJnKEeevfvb1DkzxnWKJXiPj09PTg5OTXzCgeIiWsptb29gYGKjIwMuJiFLN6Ls07BzOrFYD+/v/6/e/3338/Pz0/PT18f/svzPPrQwMDAwMBggF1R/DZSvA9jIAAAAASUVORK5CYII=
在上述数据URI中，我们通过指定MIME类型image/png来隐式指定了文件扩展名为.png。但是，这种方法只是建议浏览器使用指定的文件名，并不能确保浏览器一定会采用该建议。实际上，不同浏览器对于文件名的处理方式也存在差异。
方法二：通过Content-Disposition响应头指定文件名
如果是服务器返回数据URI，则可以通过设置Content-Disposition响应头来显式指定文件名。例如，在Node.js环境下，我们可以使用以下代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- -- - -------------
----------------------- ---- -- -
----- ---- - ------------------------------
----- ---------- - ------------------------------------
------------------ -
--------------- ------------
---------------------- --------------------------------
--
----------------------------------------------
---------------在上述代码中，我们通过设置Content-Disposition响应头，并将其值设为attachment;filename=image.png来显式指定了文件名为image.png。此时，浏览器就会优先使用该指定的文件名。需要注意的是，Content-Disposition响应头的具体格式还与文件类型、编码方式等相关信息有关，具体可参考相关规范。
结语
以上就是在使用数据URI时如何指定建议的文件名的两种方法。需要注意的是，这些方法只是建议浏览器使用指定的文件名，并不能保证浏览器一定会采用该建议。另外，在实际开发中，我们应该尽量避免使用过多数据URI，以免增加页面体积和加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9095
