vue中使用axios处理post方法导出excel表格(后端返回文件流)

使用: vue、axios

接口要求: post方法、入参为json格式、出参文件流

1.请求函数

exportExcel: function(form) {
        return axios({ // 用axios发送post请求
            method: ‘post‘,
            url: ‘/serviceTime/exportData‘, // 请求地址
            data: form, // 参数
            responseType: ‘blob‘, // 表明返回服务器返回的数据类型
            headers: {
                ‘Content-Type‘: ‘application/json‘
            }
        })
    }

2.导出函数

const params = {
    test: ‘111
}
exportExcel(params).then(res => { // 处理返回的文件流
    const blob = new Blob([res]);
    const fileName = ‘统计.xlsx‘;
    const elink = document.createElement(‘a‘);
    elink.download = fileName;
    elink.style.display = ‘none‘;
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
})

记录下,方便查找

原文地址:https://www.cnblogs.com/zqqya/p/9254840.html

时间: 2024-08-01 11:47:09

vue中使用axios处理post方法导出excel表格(后端返回文件流)的相关文章

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束 完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤 完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

java中使用jxl导出Excel表格详细通用步骤

该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入session中备份一份,在调用导出方法时,从session中获取即可, 如果为后台直接导出,直接查询数据库后将结果传入即可,当然也可以在导出Excel方法中查询. 查询方法: // 获取查询结果存入session中        Object resultList = request.getAttr

从SQL Server 2005 中 导入 导出 excel 表格

1.从 数据库 中 导出 excel  表格 定义 一个 gridview1 protected void Button1_Click(object sender, EventArgs e) //倒出数据 {     if (GridView1.Rows.Count == 0)   {       return;    }   else  {       GridView1.AllowPaging = false;//先将数据分页取消,才能全部导出数据      bind(); Export("

PHP导入导出excel表格图片(转)

写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wps等进行word等的生成之类的文章 )但是在读的时候,只用过一种,具体是什么忘了,要回去翻代码了.基本上导出的文件分为两种:1:类Excel格式,这个其实不是传统意义上的Excel文件,只是因为Excel的兼容能力强,能够正确打开而已.修改这种文件后再保存,通常会提示你是否要转换成Excel文件.优

laravel 5.4 导出excel表格

1.在laravel根目录下面找到一个composer.json文件 打开并在require下面加上一句话,如图所示: 注:以后这个excel的版本号可能还会修改 2.执行 composer install 3.在config下面的app.php中修改如下: 在providers 中加上 Maatwebsite\Excel\ExcelServiceProvider::class, 在aliases 中加上 "Excel" => Maatwebsite\Excel\Facades\

VB.NET版机房收费系统---导出Excel表格

datagridview,翻译成中文的意思是数据表格显示,使用DataGridView控件,可以显示和编辑来自不同类型的数据源的表格,将数据绑定到DataGridView控件非常简单和直观,大多数情况下,只需要设置DataSource属性即可,在绑定到包含多个列表或表的数据库源时,只需将DataMember属性设置为绑定的列表或表的字符串即可.机房收费系统多次用到数据表格的显示,并且导出为Excel表格,第一次机房收费系统是用VB版本的,她导出Excel的方法如下: 打开VB-工程-应用-勾选M

c# Datagridview控件导入/导出excel表格

在写商业软件的时候,我们会经常遇到对excel表格的操控,最常见的就是Datagridview控件导入/导出excel表格.我也同样遇到了.运用了自己的知识,再加上网上的[大部分]都过期的源码,自己写出了这两个方法,当然,和绑定数据库一样,都用到了databel类. 导入: //private string fileName; /// <summary> /// 将DataGridView中数据导入到Excel /// </summary> /// <param name=&