Vue利用文件流下载Excel文件

小仙有礼了

已于 2022-03-15 17:22:46 修改

阅读量386

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-03-15 17:06:18 首次发布

本文链接：https://blog.csdn.net/CFXXXL/article/details/123507045

版权

Vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用axios库通过POST请求下载Excel文件。参数封装在`params`对象中，设置了响应类型为`arraybuffer`，并添加了自定义的header。成功响应后，将数据转换为Blob对象，创建下载链接，触发文件下载，最后清理相关元素和资源。

摘要由CSDN通过智能技术生成

在get和post下载的时候地址的封装都一不一样

let params={
       regionCode: that.$refs.regioncode1.regioncode,
       stationName: that.searchCondition_form.key,
       monitorTypeId: that.searchCondition_form.type,
       status: that.searchCondition_form.status,
       limit: that.pagesize,
       page: that.pagenum
      }
      that.axios.post("/monitor-station/get-stations-by-region-excel",
          params,{
        responseType: 'arraybuffer',
        headers: {'token': that.$store.state.auth.user.token}})
          .then((response) => {
            let blob = new Blob([response.data],{type:'application/vnd.ms-excel;charset=utf-8'})
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = '监测站点.xlsx'; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          })
          .catch(() => {
          });