Angular 文件上传与下载

---

文件上传

方式1 使用NG ZORRO中的组件。

---

文件下载

方式1 直接下载

已知明确的下载链接，可以直接进行下载。

<a href="downloadUrl" download="fileName">下载</a>

方式2 通过HTTP请求后端数据的方式进行下载

在Angular中使用HttpClient的POST请求处理文件响应数据。

   /**
   * 文件下载
   * @param url 下载URL，【该URL需要加入到拦截器的白名单中】
   * @param savedName 存储在本地的文件名称加后缀
   * @param paramsObj 接口参数对象
   * @param successCallback 下载成功的回调函数
   * @param errorCallback 下载出错的回调函数
   */
  downloadFile(url: string, savedName: string, paramsObj: object, successCallback, errorCallback) {
    const params = {
      ...paramsObj
    };
    for (const key in params) {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key];
      }
    }
    this.http.post(this.url + url, params, {
      responseType: 'blob',
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      }),
    }).subscribe((result) => {
      const contentType = 'application/octet-stream;charset=UTF-8';
      const blob = new Blob([result], { type: contentType });
      // 创建一个URL对象
      const objectURL = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = objectURL;
      a.download = savedName; // 此处的savedName为保存到本地的文件名称及后缀
      a.click();
      // 释放已创建的URL对象
      window.URL.revokeObjectURL(objectURL);
      successCallback();
    }, (error) => {
      errorCallback(error);
    });
  }

示例：

  exportExcel() {
    const savedFileName = '表格测试' + '.xls';
    const params = {
      // 参数信息
    };
    const successCallback = () => { // 成功回调
      // other code for success
    };
    const errorCallback = () => { // 失败回调
      // other code for fail
    };
    this.service.downloadFile('测试url', savedFileName, params, successCallback, errorCallback);
  }

---

— END —