vue项目 get和post请求导出或者下载文件图片等

html:

<el-button type="primary" @click="exportFile">导出数据</el-button>

 1. get 请求不需要定义请求接口，只需要拼接url生成链接文件即可

data中定义导出url:

exportUrl :`${process.env.NODE_ENV === 'development' ? 'http://test.xxx.com' : window.location.origin}/gift/receive/export?`
//兼顾开发测试和生产环境

methods中拼接url:

    //导出数据
    exportFile() {
      window.open(
        this.exportUrl + qs.stringify({category:this.query.category,erp:this.query.erp,name:this.query.name,useTime:this.query.useTime.join(','),ids:this.reqIds.join(',')})
       );
      }

2. post 需要定义请求接口信息+文件保存插件

fileSaver可以直接从网页中导出多种格式文件

npm install file-saver --save

//ts声明

npm install @types/file-saver --save-dev

//使用
import FileSaver from "file-saver";

定义responseType为blob格式:

export async function exportCompanyBaseInfos(params) {
    return request(`/companyBaseInfo/exportCompanyBaseInfos.action`, {
        method: 'POST',
        data: qs.stringify(params),
        responseType: 'blob'
    });
}

js: 

//xxx为你想要的文件格式
exportFile(){
      this.$confirm('确定导出？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const blob = await exportCompanyBaseInfos({
          ...this.queryParams,
          fileName: '公司详细信息.xxx'
        });
        FileSaver.saveAs(blob, '公司详细信息.xxx');
      }).catch(() => {
        this.$message('已取消');
      });
    },