vue下载有传参需求的处理

最新推荐文章于 2024-05-23 16:48:11 发布

无书清书

最新推荐文章于 2024-05-23 16:48:11 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue java zip

本文链接：https://blog.csdn.net/qq_43291837/article/details/116699395

版权

本文档记录了一个使用Vue实现导出报告功能的项目场景，前端通过Vue按钮触发API调用，传参给后台。后台接收到参数后将文件打包成ZIP并返回。前端使用axios请求时指定接收blob类型，然后处理数据并触发下载。总结了从Vue到后台处理再到下载的整体流程，提供了一个下载有参数需求的模板。

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

项目场景：

要做一个导出报告的功能。
前台传参带数据，后台接收处理，把选择的文件打成zip压缩包，再下载到本地。

问题描述：

后台处理到是很好完成。关键在返回数据和前台接收的时候有点小坑。不太熟悉。记录一下前端和后台的模板。

一、前端

1.vue界面调用导出按钮的方法：

import {
    exportReport } from "@/api/***/***";

export default {
   
   /*********/
  methods: {
   
   exportProjectReport() {
   
      /*********/
       let params = {
   传参};
      exportReport(params);
      /*********/
     ｝
   }
   /*********/
}

2.调用api接口的JS文件：

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


// 导出项目报告
export function exportReport(data) {
   
    let baseUrl = process.env.VUE_APP_BASE_API
    axios({
   
        method: 'post',
        //后台接口，记得拼接前缀
        url: baseUrl + '/***/***',
        data: data,
        responseType: 'blob',
        //看自己项目是否后台带token验证
        headers: {
    'Authorization'

最低0.47元/天解锁文章