话不多说 这次项目需求 需要下载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的问题,唯一注意参数需要转为字符串。

下载之后如下所示!
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐