vue实现zip格式文件的下载，总结一下

话不多说 这次项目需求 需要下载zip格式的文件，前后使用了axios和fetch去调用都成功了，下面我来把细节代码展示出来

Axios

axios去下载的方法略有繁琐，是因为fetch有独特的封装方法，代码如下：

 axios({
      method: 'POST', //这个不解释了吧
      url,           //路径
      data: params, //传参
      responseType: 'blob', //告诉服务器想到的响应格式
      headers: { 'Content-Type': 'application/json; application/octet-stream' },
    })
      .then(res => {
        let blob = new Blob([res.data], { type: 'application/zip' }); //设置下载的内容以及格式
        const url = window.URL.createObjectURL(blob); //设置路径
        const link = window.document.createElement('a'); // 创建a标签
        link.href = url;
        link.download = '文件'; //设置文件名
        link.style.display = 'none';
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      })
      .catch(function (error) {
        showMessage('下载失败', 'error');
        console.log(error);
      });

需要注意：

这里我们需要注意的是

1. responseType: ‘blob’ 这个参数非常重要，一般不写默认是text，但如果后端返回的是数据流，那么就是一通乱码，此时需要定义为blob，告诉服务器自己需要的响应格式。
2. 创建blob对象的时候 第一个参数往往是返回的那一串乱码 把他放到数组中，第二个参数是设置下载的格式，这里我们的zip，所以是application/zip，
   其他类型如下：
   .doc => application/msword
   .docx => application/vnd.openxmlformatsofficedocument.wordprocessingml.document
   .xls => application/vnd.ms-excel
   .xlsx => application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
   .ppt => application/vnd.ms-powerpoint
   .pptx => application/vnd.openxmlformats-officedocument.presentationml.presentation
3. 如果使用了axios的方法，一定要注意项目文件中main.js或者main.ts是否引入了Mock，如果引入一定要隐藏，否则axios的下载的文件夹会受损！！（含泪提示，作者因为这个坑点，耽误了一下午的功夫）

Fetch

fetch的方法就省事很多，但也要注意，fetch传post文件的时候，需要先将参数转为字符串！

 fetch(url, {
      body: JSON.stringify(params),
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    }).then(res => {
      res.blob().then(blob => {
        // 转化为blobURL后再通过a标签下载
        const blobUrl = window.URL.createObjectURL(blob);
        const a = window.document.createElement('a');
        a.href = blobUrl;
        a.download = '文件.zip';
        a.click();
        window.URL.revokeObjectURL(blobUrl);
      });
    });

fetch自带的blob方法可以让我们省事很多，同时不需要考虑main,js是否引入mock的问题，唯一注意参数需要转为字符串。

下载之后如下所示！