Question

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

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

我尝试了这段代码：但是问题在于，它导入了所选文件夹，其中包含所有文件，但实际上我只需要它的路径。

Answer 1

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

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

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

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

2 个答案: