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

【问题标题】：How to build a directory chooser in an angular 7 application?如何在 Angular 7 应用程序中构建目录选择器？
【发布时间】：2019-09-09 20:04:32
【问题描述】：

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

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

我已经尝试过这段代码：但问题是这会导入包含所有文件的选定文件夹，但我实际上只需要它的路径。

【问题讨论】：

“以下人们说在现代浏览器中不可能做到的答案” - 你为什么认为它们不正确？
在他们发布问题后可能发生了一些更新，我需要一个实用的解决方案。
更新如放弃安全？你需要重新考虑。
向下滚动：stackoverflow.com/questions/46470453/…

标签： javascript angular typescript

【解决方案1】：

您可以将文件保存为 Blob 并使用此代码

window.navigator.msSaveOrOpenBlob(blob, 'nameOfFile.json');

【讨论】：

【解决方案2】：

与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);

【讨论】：