axios下载zip

最新推荐文章于 2024-05-09 14:46:33 发布

原创最新推荐文章于 2024-05-09 14:46:33 发布 · 742 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #axios #zip

vue2.x 同时被 2 个专栏收录

33 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

这篇博客展示了如何使用axios库在JavaScript中实现文件的下载功能，特别是zip文件。通过设置请求头、参数及响应类型，结合Blob和URL.createObjectURL方法，实现了从API获取文件并触发浏览器下载。在实际应用中，该方法被用于处理`documentsDownload`接口的文件下载，参数包括文件路径和自定义文件名。

目标：

实现：

import axios from 'axios';
import { getToken } from '@/utils/auth';

export const downloadZip = (url: string, params: any, fileName: string) => {
  axios({
    method: 'GET',
    url: `${process.env.VUE_APP_BASE_API}${url}`,
    headers: {
      Authorization: 'Bearer ' + getToken(),
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    params: params,
    responseType: 'blob',
  }).then((res: any) => {
    const blob = new Blob([res.data], { type: 'application/zip' }); // new一个二进制对象
    const url = window.URL.createObjectURL(blob); // 转化为url
    const link = document.createElement('a'); // 创建个a标签
    link.href = url;
    link.download = fileName; // 重命名
    link.click();
    URL.revokeObjectURL(url); // 释放内存
  });
};

使用：

const documentsDownload = `rest/xxx/documentsDownload`;

private async handleDownload(file: string) {
   const param = { fileWebPaths: file };
   await downloadZip(documentsDownload, param, '附件');
}