首页 > 网络编程 > JavaScript > javascript技巧 > 前端GET/POST请求下载文件

前端GET/POST请求下载文件多种方式代码示例

2024-06-26 09:57:15 作者：miao_0923

文件都是通过接口获取的,前端通过调用接口将接口返回的文件下载,下面这篇文章主要给大家介绍了关于前端GET/POST请求下载文件的多种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下

下载post

export const download = (data, projectId) => {
  return request({
    url: BaseUrl + '/xxx/xxx/xxx',
    headers: {
      "Project-Id": projectId,
      httpWhite: true,
    },
    responseType: "blob",//文件流
    method: 'post',
    data
  })
}

<el-button size="small" type="primary" class="downLoadTemplate" @click="downloadFile(row)">
    <i class="iconfont yun-xiazai"></i>
    <span class="first">下载数据模板</span>
</el-button>
//点击下载
const downloadFile(row){
  const params = {
    需要传递的参数:'xxxx',
    id:row.id,  //示例,
  }  
  download(params, this.projectIds).then((res) => {
    if (res.status === 200) {
      this.downloadDataTemplate(res);
    }
  });
}

//下载数据模板
downloadDataTemplate(res) {
  if (!res.data) {
    return;
  }
  const fileName = decodeURIComponent(
    res.headers["content-disposition"].split("filename=")[1]
  );
  const blob = new Blob([res.data], {
    type: "application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet;charset=utf-8",
  });
  const downloadElement = document.createElement("a");
  const href = window.URL.createObjectURL(blob); // 创建下载的链接
  downloadElement.href = href;
  // 文件名中有中文 则对文件名进行转码
  downloadElement.download = fileName; // 下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); // 点击下载
  document.body.removeChild(downloadElement); // 下载完成移除元素
  window.URL.revokeObjectURL(href); // 释放blob对象
},

Get下载方法

通用get下载方法 99%可以使用

const downError = `BaseUrl+/xxx/xxx/xxxx?${this.tokenHeader}=${getToken()}&projectId=${this.projectId}&spaceId=${this.spaceId}`;

window.open(downError, "_self");//调用window方法

特殊get下载方法 1%才能用到一般用不到（仅用于个人记录）

这种使用于需要在hearder里面添加projecrt-Id等参数一般的都不需要主要看后端接口能不能使用

使用下面这种方法 最主要get下载的请求是responseType：blob 文件流

export const exportPersonnel = (params) => request({
  url: BaseUrl + '/exportxxx/xxxx',
  headers: {
    "Project-Id": params.projectId,
  },
  method: 'get',
  responseType: 'blob',		//文件流方法
  params,
})

// 导出
exportcustomer() {
  let downStr = { ...this.params };
  exportPersonnel(downStr).then((r) => {
    if (r.status === 200) {
      //获取下载文件名 
      const fileName = decodeURIComponent(
        r.headers["content-disposition"].split("filename=")[1]
      );
      // 创建 a 元素
      const link = document.createElement('a');
      const href = window.URL.createObjectURL(r.data)//创建下载链接
      link.href = href;// 设置下载链接的 URL
      link.style.display = "none";

      link.download = fileName; // 下载后文件名
      document.body.appendChild(link);
      link.click(); // 点击下载
      document.body.removeChild(link); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放blob对象
    }
  });
},

总结

到此这篇关于前端GET/POST请求下载文件多种方式的文章就介绍到这了,更多相关前端GET/POST请求下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

RestTemplate发送get和post请求,下载文件的实例