vue 接口请求下载文件

最新推荐文章于 2025-05-19 15:26:42 发布

原创最新推荐文章于 2025-05-19 15:26:42 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue接口请求下载文件 #vue下载文件 #js下载文件 #js接口请求下载文件 #下载文件

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue应用中通过接口请求实现文件下载。主要涉及Vue调用API接口，以及处理下载文件的方法。

在api文件中的接口定义：

export function downLoadFile (q) {
    return axios({
      url: '/file/downLoadFile',
      method: 'get',
      params: q,
      responseType: 'blob'
    })
  }

下载按钮的调用方法：

down(id) {
  downLoadFile({id}).then(res => {
    let blob = new Blob([res],{type: 'application/pdf;charset=utf-8'});
    let downloadElement = document.createElement('a');
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    // downloadElement.setAttribute('download', 'fileName')
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
  })
},