使用 Angular 下载本地文件夹答案

【问题标题】：Downloading a local folder using Angular使用 Angular 下载本地文件夹
【发布时间】：2020-10-10 11:48:12
【问题描述】：

如何使用 Angular 下载包含 HTML 文件的本地文件夹？

我试过了：

   readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}

 download(){
  this.file= "../monFichier/file.html"
  this.zip.file("file.yaml", this.readFile(this.file));

  this.fileUrl = this.zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
    FileSaver.saveAs(blob, "downloadables.zip");                          // 2) trigger the download
    }, function (err) {
        console.log('err: '+ err);
    });
}

代码 this.readFile(file) 导致错误，因为属性文件不是 File 类型。如何读取该文件的内容以便将其添加到 zip 文件中？

【问题讨论】：

你发送一个fileUrl ..你期望什么？？如果设置文件夹，则遍历其中的所有文件。
我知道先生，谢谢您的回答，问题是我不知道该怎么做。我应该这样做:( const data = '../monFichier.zip';) 然后我怎样才能将文件调用到该文件夹中？
medium.com/@tarekabdelkhalek/…

标签： angularjs angular typescript

【解决方案1】：

有很多资源！只需搜索：

AngularJS Upload and Post Multiple Files

Upload multiple files in angular

Upload multiple File Using angularjs with custom data for each one?

https://stackoverflow.com/a/44385918

【讨论】：

我不是想上传文件，事实上我想从组件的 HTML 中生成一个文件。

【解决方案2】：

根据新的 chrome 规范 https://developers.google.com/web/updates/2018/02/chrome-65-deprecations 的最佳解决方案

async downloadBrochure(url: string) {
    try {
      const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
      this.downloadFile(res);
    } catch (e) {
      console.log(e.body.message);
    }
  }

  downloadFile(data) {
    const url = window.URL.createObjectURL(data);
    const e = document.createElement('a');
    e.href = url;
    e.download = url.substr(url.lastIndexOf('/') + 1);
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
  }

【讨论】：