javascript - 如何在 Angular 7 应用程序中构建目录选择器？

Question

我正在设置一个新的 Angular 7 网络应用程序。这是一个只有一个目的的简单应用程序。在我的 typescript 组件中，我正在构建一个 JSON 对象。鉴于 json 对象已经设置并填充了信息，我的目标是让用户选择在用户硬盘驱动器中保存此 json 对象的路径。所以我需要创建某种目录/路径选择器对话框(比如谷歌浏览器中的“另存为”对话框)。我该怎么做？

我发现了以下答案，其中人们说在现代浏览器中不可能做到这一点。我需要确认这一点并尝试找到另一种解决方案: Directory Chooser in HTML page Allow to choose directory using Angular FileSaver.js

我试过这段代码:但问题是这会导入选定的文件夹及其中的所有文件，但我实际上只需要它的路径。

Answer 1

这与Angular无关，它是现代浏览器的安全机制，基本上浏览器不允许网站访问本地文件系统，这意味着您不能通过客户端javascript选择本地文件夹路径。

你能做的最好的事情就是将 json 对象保存到浏览器默认的下载文件夹

const element = document.createElement('a');
element.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(jsonObject))}`);
element.setAttribute('download', filename);

document.body.appendChild(element);

element.click();

document.body.removeChild(element);