下面的下载都是以图片为例，其他文件 如视频文件也是适用于下列方法的.

1、单张图片下载：

1.1 原生js网络请求方式

<button (click)="downSingleImg()">下载单张图片</button>

downSingleImg() {
  const url = 'https://tse1-mm.cn.bing.net/th/id/OET.625d80efe5644911a2c926ad8f08a365?w=272&h=135&c=7&rs=1&o=5&pid=1.9';

  this.getFileBlob(url).then((res) => {
    const a = document.createElement('a');
    const href = window.URL.createObjectURL(res);
    a.href = href;
    a.download = 'photo'; // 设置图片名称
    a.click();
    a.remove();
    window.URL.revokeObjectURL(href);
  });
}

getFileBlob(url: any) {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };
    xhr.send();
  });
}

1.2 http请求方式

// ts中
downSingleImg() {
  this.uploadFileService.getFile(url).subscribe((res) => {
    const a = document.createElement('a');
    const href = window.URL.createObjectURL(res);
    a.href = href;
    a.download = 'photo'; // 设置图片名称
    a.click();
    a.remove();
    window.URL.revokeObjectURL(href);
  });
}

// 服务里：
getFile(url: string) {
  return this.http.get(url, {
    responseType: 'blob'
  });
}

1.3 axios请求方式

// 安装
$ npm install axios

// 引用
import axios from 'axios';

// 下载
downSingleImg() {
    const url = 'https://tse1-mm.cn.bing.net/th/id/OET.625d80efe5644911a2c926ad8f08a365?w=272&h=135&c=7&rs=1&o=5&pid=1.9';
  
    axios.get(url, { responseType: 'blob' }).then((res: any) => {
      const a = document.createElement('a');
      const href = window.URL.createObjectURL(res.data); // 注意这里是res.data，不是res
      a.href = href;
      a.download = 'photo'; 
      a.click();
      a.remove();
      window.URL.revokeObjectURL(href);
    });
}

注意：上面三种请求方式选其一即可。

2、打包下载

可以根据项目需求设置打包下载的文件列表格式

例子：

<button (click)="downPackageImg()">打包下载图片</button>

// 安装
npm install file-saver
npm install jszip

// 引用
import JSZip from 'jszip';
import FileSaver from 'file-saver';

// 打包下载
downPackageImg() {
  const data = [
    {
      // 这个名字后缀是要有图片格式的
      fileName: '蒙版1.svg',
      url: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg'
    },
    {
      fileName: '蒙版2.svg',
      url: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg'
    }
  ];

  const zip = new JSZip();
  const cache = {};
  const promises: any = [];

  data.forEach((item: any) => {
    const promise = this.getFile(item.url).then((res: Blob) => {
      zip.file(item.fileName, res, {
        binary: true
      });
      cache[item.fileName] = res;
    });
    promises.push(promise);
  });

  Promise.all(promises).then(() => {
    zip
      .generateAsync({
      type: 'blob'
    })
      .then((content) => {
      // 生成二进制流
      FileSaver.saveAs(content, 'file.zip'); // 利用file-saver保存文件
    });
  });
}

// http网络请求方式
getFile(url: string) {
  return new Promise((resolve, reject) => {
    // http请求
    this.uploadFileService
      .getFileSource(url)
      .toPromise()
      .then((data) => {
      resolve(data);
    })
      .catch((error) => {
      reject(error.toString());
    });
  });
}

// 在uploadFileService服务里写：
getFileSource(url: string) {
  return this.http.get(url, {
    responseType: 'blob'
  });
}

上面的http请求也可以改为axios请求,如果用axios请求的话就不用在服务里写了。

// 安装
npm install axios

// 引用
import axios from 'axios';

// axios请求
getFile(url: string) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url,
      responseType: 'arraybuffer'
    })
      .then((data) => {
      resolve(data.data);
    })
      .catch((error) => {
      reject(error.toString());
    });
  });
}

注意： 上面的http请求和axios请求方式，两者其一就行