vue如何通过$http的post方法请求下载二进制的Excel文件

已于 2024-01-16 09:34:47 修改
阅读量938 收藏 9
点赞数 10
分类专栏： vue及插件二次封装 文章标签： vue.js http javascript
于 2024-01-15 11:15:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiuxialala/article/details/135509289
版权

方式一：单独接口,接口封装 特定的service.js

1.下载

//下载
export function getReportTemplate(){
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: '/fas/engine/web/fund/final/template',
            responseType: "blob",
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
            },
        }).then((res) => {
            resolve(res)
        }).catch(error => {
            reject(error)
        });
    })
}

使用此function

//下载上报的模板
uploadTemplate(){
    getReportTemplate().then((res) => {
        console.log("getReportTemplate",res);
        var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
        var downloadElement = document.createElement('a')//创建一个a 虚拟标签
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "基金预算编报模板"; // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
    });
},

2.上传

//上传
export function getReport(formData){
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: '/fas/engine/web/fund/budget/addReport',
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then((res) => {
            resolve(res)
        }).catch(error => {
            reject(error)
        });
    })
}

使用此function, test.vue

<template>
  <el-dialog :destroy-on-close="true" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible" @closed="closed">
    <el-upload style="width:100%"
          ref="upload"
          class="upload-demo"
          drag
          accept=".xlsx"
          :limit="limit"
          action=""
          :show-file-list="false"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :http-request="handleUpload"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :auto-upload="false"
          >
          <i class="el-icon-upload" v-show="!uploadFlag"></i>
          <div class="el-upload__text" v-show="!uploadFlag">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__text" v-show="!uploadFlag">支持格式.xlsx且不超过10MB!</div>
          <div class="my-el-upload__text" v-show="uploadFlag">
            <span class="filename">{{fileName}}</span> {{fileSize}}
              <br/>
              <br/>
            <span class="cx">重选</span>
          </div>
          <div class="el-upload__tip" slot="tip">
            <div>导入说明：</div>
            <div>1.请确定使用最新版本导入数据，否则会提交失败。</div>
            <div>2.请按模板中的约束条件操作，否则会提交失败。</div>
          </div>
        </el-upload>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button size="mini" @click="dialogVisible = false">取消</el-button> -->
      <el-button size="mini" type="primary" @click="submitUpload()">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import {getReport} from '@/services/fumtService/fundRunManage/fundCalFormulationService';
import { formatBytes } from "@/utils/util";
export default {
  name: "fundCalUpload",
  data() {
    return {
      dialogVisible: false,
      editForm:{},
      limit:1,
      uploadFlag:false,
      fileList: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      title:'',
      fileName:'',
      fileSize:'',
    };
  },
  methods: {
    beforeUpload(file) {
      // console.log(file);
      // var testmsg = file.name.substring(file.name.lastIndexOf('.')+1);
      // const extension = testmsg === 'xlsx';
      // const isLt10M = file.size / 1024 / 1024 < 10;
      // if(!extension) {
      //   Message.error('上传文件只能是 .xlsx 格式');
      // }
      // if(!isLt10M) {
      //   Message.error('上传文件大小不能超过 10MB!');
      // }
    },
    submitUpload() {
        if(!this.uploadFlag){
            Message.error("请先选择文件！");
        } else{
            this.$refs.upload.submit();
        }
    },
    handleRemove(file, fileList) {
        this.uploadFlag = false
    },
    handleChange(file, fileLists){
      console.log("----------file",file);
      console.log("----------fileLists",fileLists);
        var testmsg = file.name.substring(file.name.lastIndexOf('.')+1);
        const extension = testmsg === 'xlsx';
        const isLt10M = file.size / 1024 / 1024 < 10;
        if(!extension) {
          Message.error('上传文件只能是 .xlsx 格式');
        }
        if(!isLt10M) {
          Message.error('上传文件大小不能超过 10MB!');
        }
        if(extension && isLt10M){
          this.fileName=file.name;
          this.fileSize=formatBytes(file.size,2);
          this.uploadFlag = true;
        }
        return extension && isLt10M;
    },

    handleUpload(file) {
      let formDatas = new FormData();
      formDatas.append("file", file.file);
      formDatas.append("rid", this.editForm.rid);//这"file" 代表参数名
      // formDatas.append("user_id", 18); //把后端需要参数全部用这个形式push进去
      getReport(formDatas).then((res) => {
        Message.success('上报成功');
        this.dialogVisible = false;
      }).catch((err)=>{
        Message.error(err);
      })
      
    },
    handleExceed(files, fileList) {
      this.handleChange(files[0], fileList);
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      // Message.warning(`当前限制选择 1 个文件！`);
    },
    handleClose: function (done) {
        let self = this
        Bus.$emit("delCurrentTab", "businessQuery/CntrDetail");
    },
    closed(){
      this.uploadFlag=false;
      this.fileList= [];
      this.title='';
    },
    show(data,title) {
      this.title=title;
      this.dialogVisible = true;
      this.editForm = JSON.parse(JSON.stringify(data));
    },
    submitForm(){
      this.$refs.upload.submit();
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .el-form-item__content {
  width: 100%;
}

/deep/ .el-upload{
  width: 100%;
}
/deep/ .el-upload-dragger{
  width: 100%;
}
.my-el-upload__text:focus{
  outline: none!important;
}
.my-el-upload__text{
  // outline: none!important;
  margin-top:50px;
  color:#606255;
  .filename{
    margin-right: 20px;
    color: #303133;
    text-decoration: underline;
  }
  .cx{
    color: #1b65b9;
  }
}

</style>

方式二、封装通用的底层的service.js

重点：

instanceName: "exportExcel",导出excel文件

instanceName: "downloadLog",下载.log后缀的txt文件

// 可声明axios的default配置
export const defaults = defineRequestConfig([
  {
    /**
     * 对参数 `params` 进行序列化
     * axios 默认做参数序列化时会进行encode 导致某些接口中文参数问题，暂时使用外部覆盖方式解决
     */
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: false })
    },
    // 多实例配置
    interceptors: {
      request: {
        // 设置请求头信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/json'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        // 请求失败
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 处理请求错误的返回结果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判断登录超时
          if (response && response.status === 401) {
            console.error('登录超时', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳转登录页
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 页面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }

          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: true })
    },
    instanceName: "test",
    baseURL: '/test',
    interceptors: {
      request: {
        // 设置请求头信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/json'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        // 请求失败
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 处理请求错误的返回结果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判断登录超时
          if (response && response.status === 401) {
            console.error('登录超时', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳转登录页
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 页面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: false })
    },
    instanceName: "exportExcel",
    baseURL: '/test',
    interceptors: {
      request: {
        // 设置请求头信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.responseType = "blob"
          config.headers['Content-Type'] = 'application/json;charset=UTF-8'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        onResponse: (response) => {
          const { data } = response;
          const str = response?.headers['content-disposition']
          const oldFileName = buildFileName(str)
          const filename = response?.headers['Kyy-Hosp-Dip-Filename']
          response.data = {
            data: data,
            filename: filename ? filename : oldFileName
          }
          return response
        },
        // 请求失败
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 处理请求错误的返回结果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判断登录超时
          if (response && response.status === 401) {
            console.error('登录超时', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳转登录页
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 页面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: true })
    },
    instanceName: "downloadLog",
    baseURL: '/test',
    interceptors: {
      request: {
        // 设置请求头信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/octet-stream'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        onResponse: (response) => {
          const { data } = response;
          const filename = response?.headers['Kyy-Hosp-Dip-Filename']
          response.data = {
            data: data,
            filename: filename
          }
          return response
        },
        // 请求失败
        onError: (error) => {
          console.log('error', error);
          const { response } = error
          const { data } = response

          // 处理请求错误的返回结果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判断登录超时
          if (response && response.status === 401) {
            console.error('登录超时', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳转登录页
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 页面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
])

const buildFileName = (disposition) => {
  let result = null;
  const list = disposition.split(";")
 
  list.forEach(item => {
    if (item.indexOf("filename=") != -1) {
      const name = item.split("filename=");
      result = decodeURI(name[1])
    }
  });
  return result;
}

封装接口

 export function exportResult(data) {
    return httpApi({
        instanceName: 'exportExcel',
        url: '/**/',
        method: 'post',
        data
    })
}

 export function downloadSyncLog(params) {
    return httpApi({
        instanceName: 'downloadLog',
        url: '/**/',
        method: 'get',
        params
    })
}

代码中使用：

// 导出数据excel
exportData() {
  let params = this.getSearchParams();
  params.count = this.pagesUp.total;//导出下载必填
  exportResult(params).then(res => {
    //这个里面的data 的二进制文件 创建一个文件对象
    let blob = new Blob([res.data || ""], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    let downloadElement = document.createElement('a')//创建一个a 虚拟标签
    let href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = "test文件名"; // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
    this.$message.success('导出成功')
  }).catch(e => {
    this.$message.error('导出失败')
  })
},
// 日志下载
download(row){
  downloadSyncLog({syncTaskId:row.syncTaskId}).then(res => {
    let blob = new Blob([res.data || ""], {
        type: 'application/text'
    });
    let downloadElement = document.createElement('a')//创建一个a 虚拟标签
    let href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = row.syncTaskId+'.log'; // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
    this.$message.success('下载成功')
  }).catch(e => {
    this.$message.error('下载失败')
  })
},

夏花里的尘埃
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue下载excel的实现代码后台用post方法
10-17
主要介绍了vue下载excel的实现代码,后台用post方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Angular利用HTTP POST下载流文件的步骤记录
10-15
在Angular开发过程中，有时我们需要实现从服务器下载文件，特别是流文件。当后台不提供直接的下载链接，而是返回文件流时，我们需要自行处理这个流并将其转换为可下载的文件。本文将详细介绍如何在Angular中利用HTTP...
文件流前端下载
weixin_45283069的博客
02-28 492
// 调用后台下载接口 downFile(fileName).then((res) => { const _res = res; let blob = new Blob([_res], { type: 'application/pdf' }); let downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.hr
Vue2请求数据流，并导出为Excel
最新发布
weixin_44375151的博客
06-20 157
Vue2如何将请求到的数据流导出成Excel文件。
vue POST 请求方式下载excel文件
银滴子的博客
10-22 3531
1.使用技术 node -koa vue 2.上代码 前端请求 先配置vue脚手架里的request请求，在响应请求前加入以下判断 const res = response.data // 处理post下载 if (response.data.type === 'application/vnd.openxmlformats') { return response.data } exportArticleStat({'cids':cids}).then
【vue】使用axios发送post请求实现excel下载
小朋友的博客
01-09 1262
使用axios发送post请求实现excel下载
vue二进制流文件下载Excel
QZ9420的博客
03-22 353
文件上传后缀名与文件类型对照表。
vue得到后端二进制流下载excel文件
chendiancd的博客
04-30 601
直接更改url可用
vue+element上传excel后台返回二进制下载excel
weixin_44462233的博客
01-26 563
我做的是一个校对功能。前端上传一个excel给后台。后台返回我二进制数据流。把它处理成文件流下载下来。 <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'--> <crudOperation :permission="permission"> <template> <el-button slot="left" cla
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。 首先，我们来...
vue+axios实现文件下载及vue中使用axios的实例
10-17
这是因为 Blob 数据类型可以用来处理二进制数据，如文件。以下是一个示例： ```javascript axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, response...
js发送post请求下载文件
07-27
大家都知道ajax是不能直接下载文件的，所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了，如下是一个工具方法(依赖jquery) 可以通过发送多数据的情况下下载文件。IE8或以下不支持有报错。
使用vue实现excel导入和导出功能
11-09
直接上代码，使用vue实现表格excel的导入功能，使用vue实现表格excel的导出功能
前端 vue 怎么下载后端返回的二进制流 excel 表格文件
github
07-28 3874
前端处理二进制流文件并下载，功能实现，你可以给 download 属性设置不同的值，来给文件取名，通常会加上一个时间函数必须添加responseType: ‘arraybuffer’，不然报错(responseType也可以是blob，可自行尝试)new Blob([res], { type: ‘.xlsx’ }) 中的type可以改成其他格式，取决于你要导出的文件类型。
Post请求下载文件
sleetdream的博客
08-17 1973
1、Form方式 参考：http://www.cnblogs.com/ys-wuhan/p/6599063.html var url = "请求URL"; var params = 请求参数; $.ajax({ type: "POST", url: url, data: params, succe
前端通过Http下载后端传入的Excel（基于Angular）
weixin_45680024的博客
03-28 1095
前端通过Http下载Excel
Post 和 Get 两种方式实现数据导出Excel文件并下载
chen1030416518的博客
04-05 9311
Post 和 Get 两种方式实现数据导出Excel文件并下载
vue post下载
chinese_cai的博客
05-25 298
vue 使用 axios.post 下载文档
Vue Axios 请求api post方式 下载文件
WangYan的博客
07-29 1548
VueAxios请求api下载文件。
vue 使用post下载文件二进制流
01-07
在Vue中使用POST请求下载文件的二进制流，可以通过以下步骤实现： 1. 首先，需要在Vue项目中安装axios，可以通过命令`npm install axios`进行安装。 2. 在需要下载文件的组件中，引入axios模块，可以使用`import axios from 'axios'`导入axios。 3. 创建一个方法来处理文件下载，例如`downloadFile`。 4. 在`downloadFile`方法中，使用axios发送POST请求，并设置`responseType`为`blob`，表示接收二进制流的响应。 5. 在请求的数据中，设置相应的请求头`Content-Type`为`application/json`（根据接口要求）。 6. 在成功响应的回调函数中，将获取到的二进制流数据转换成Blob对象并创建URL。 7. 创建一个a标签用于生成下载链接，并设置其属性href为之前创建的URL，属性download为下载文件的文件名。 8. 把a标签添加到页面上，并模拟点击以下载文件。 下面是一个示例代码： ```vue <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> import axios from 'axios'; export default { methods: { downloadFile() { axios.post('http://example.com/download', { // 请求体数据根据接口要求设置 }, { responseType: 'blob', // 设置响应数据类型为二进制流 headers: { 'Content-Type': 'application/json' // 根据接口要求设置请求头 } }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); // 转换成Blob对象并创建URL const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.jpg'); // 设置下载文件的文件名 link.click(); link.remove(); // 移除生成的a标签 }) .catch(error => { console.log(error); }); } } } </script> ``` 上述代码会在点击按钮时发送一个POST请求，接收到响应后将其转换成Blob对象，并通过模拟点击a标签的方式下载文件。如需更改下载的文件名，可修改`setAttribute('download', 'file.jpg')`中的文件名部分。 注意：请求地址、请求数据、请求头等根据实际情况进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值