Angular 文件上传与下载

Angular 文件上传与下载实现

最新推荐文章于 2025-09-24 13:38:47 发布

原创

最新推荐文章于 2025-09-24 13:38:47 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #angular

本文介绍了在Angular中使用NGZORRO组件进行文件上传，以及两种不同的文件下载方法：直接下载和通过HTTP请求下载。在HTTP请求下载中，详细阐述了如何设置响应类型、创建Blob对象，并利用URL.createObjectURL生成下载链接，最后触发下载。

Angular文件上传与下载

文件上传
- 方式1 使用NG ZORRO中的组件。
文件下载
- 方式1 直接下载
- 方式2 通过HTTP请求后端数据的方式进行下载

文件上传

方式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) {