vue通过接口直接下载java生成好的Excel表格案例

通过浏览器直接访问导出接口就会自动下载创建好的 Excel 表格。但是我们在vue里使用axios请求接口，一般是处理json数据，如果要处理文件流数据，需要做下特殊处理即可直接下载文件。

假如 下载Excel接口为：/apis/downExcel，则请求如下

import axios from 'axios'

export const exportFile = params => {
 var param = new URLSearchParams()
 param.append('beginTime', params.beginTime)
 param.append('endTime', params.endTime)
 return axios({
  method: 'post',
  data: param,
  url: '/apis/downExcel',
  responseType: 'blob'
 })
}

下载按钮触发下载方法如下：

downExcel() {
 var params = {
  beginTime: this.times[0],
  endTime: this.times[1]
 };
 exportFile(params).then(
  data => {
   /** 获取生成设置好的文件名 */
   var filename = data.headers["content-disposition"];
   filename = filename.split("=")[1];
   filename = decodeURIComponent(filename, "utf-8");
   /** 接收文件流 */
   const blob = new Blob([data.data]);
   let url = URL.createObjectURL(blob);
   /** 模拟浏览器操作Document，并模拟下载动作 */
   let link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
   link.setAttribute("download", filename);
   document.body.appendChild(link);
   link.click();
  },
  error => {
   console.log(error);
   this.$message.error("下载异常，请稍后再试");
  });
}

这样就可以在vue项目中完整下载Excel接口，当然vue也有生成Excel的插件，接收后台的json数据然后在前端生成并下载。

补充知识：Vue实现通过后端接口导出Excel表格

需求：后端提供下载接口，返回二进制文件流，前端导出为xlsx格式的Excel表格

实现：

1、按钮调用下载接口

2、new Blob导出

PS：

1、第一步请求接口时，注意要设置请求responseType为blob类型，否则下载后，显示格式错误，无法打开

2、new Blob请求是，注意修改type类型为application/vnd.ms-excel

以上这篇vue通过接口直接下载java生成好的Excel表格案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Java对Excel表格的上传和下载处理方法

    Java对Excel表格的上传和下载处理方法

    Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 这里我是按照正规的项目流程做的案例,所以可能会比网上的一些Demo复杂一些.不过文件的上传和下载基本都是一套固定的流程,只是每个人的实现方式不太相同. 数据库我用的是MySql. 下面是我的项目目录: 按照正常的项目做了分层处理,文件上传的业务我放到了service处理,而文件

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • Vue实现导出excel表格功能

    引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

  • vue通过接口直接下载java生成好的Excel表格案例

    通过浏览器直接访问导出接口就会自动下载创建好的 Excel 表格.但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特殊处理即可直接下载文件. 假如 下载Excel接口为:/apis/downExcel,则请求如下 import axios from 'axios' export const exportFile = params => { var param = new URLSearchParams() param.append('beginTi

  • Java实现批量导入excel表格数据到数据库中的方法

    本文实例讲述了Java实现批量导入excel表格数据到数据库中的方法.分享给大家供大家参考,具体如下: 1.创建导入抽象类 package com.gcloud.common.excel; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.PrintStream; import java.sql.SQLException;

  • Java使用easyExcel导出excel数据案例

    easyExcel简介: Java领域解析.生成Excel比较有名的框架有Apache poi.jxl等.但他们都存在一个严重的问题就是非常的耗内存.如果你的系统并发量不大的话可能还行,但是一旦并发上来后一定会OOM或者JVM频繁的full gc. easyExcel是阿里巴巴开源的一个excel处理框架,以使用简单.节省内存著称. easyExcel采用一行一行的解析模式,并将一行的解析结果以观察者的模式通知处理 easyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据

  • Java利用Easyexcel导出excel表格的示例代码

    目录 1.导入 EasyExcel Maven包 2.配置 3.输出Excel到前端 1.导入 EasyExcel Maven包 <!--easyexcel 导出excel依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.7</version> </depend

  • java导出数据库中Excel表格数据的方法

    本篇文章基于java把数据库中的数据以Excel的方式导出,欢迎各位大神吐槽: 1.基于maven jar包引入如下: <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifactId>jxl</artifactId> <version>2.6.12</version> </dependency> 2.首先创建数据库对应的实体类VO :U

  • java实现批量导入Excel表格数据到数据库

    本文是基于Apache poi类实现的批量导入读取Excel文件,所以要先引入Apache poi的依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.1</version> </dependency> <dependency> <groupId>org.a

  • java生成XML的方法【附demo源码下载】

    本文实例讲述了java生成XML的方法.分享给大家供大家参考,具体如下: 下拉框的生成,我是通过javascript读取xml文件生成的.Xml文件是根据数据库生成的.Xml文件只相当于页面到数据库的一道缓存.这样利于性能.生成xml文件又是一件繁琐的事情.只好交给机器去做了.真正的情景是程序定期自动或人为手动触发程序生成xml.今天我单独把xml文件生成的功能剥离出来写了一个小程序. 具体的实现是,使用jxl.jar读取(我承认我很喜欢使用Execel写配置)的SQL语句.SQL要指明哪些是名

  • Java程序部署到服务器上,接口请求下载文件失败/文件为空/文件名不对的问题

    1.问题: 昨天把项目打包放到国产中间件东方通(外部容器,功能类似Tomcat)上时,发现某些请求下载文件的接口不能正确返回文件,而是返回一个空的文件,名称是接口名最后一个词fj, 然而这个功能直接使用IDE启动时没问题的,打包放到Tomcat9上也没问题,那可能是东方通适配问题了 2.原代码: 部署在服务器上系统以后,在线打断点,发现跑到这一部分就在第三行位置执行不下去 response.setContentType("application/force-download"); re

  • Windows中使用Java生成Excel文件并插入图片的方法

    Windows中使用Java生成Excel文件并插入图片的方法

    生成简单的Excel文件  在现实的办公中,我们常常会有这样一个要求:要求把报表直接用excel打开.在实习中有这样一个需求.根据所选择的资源查询用户所提供附件的全部信息并生成excel供下载.但是在查询的时候我们需要来检测用户所提供的附件里面的信息是否有错误(身份证).有错误的生成错误信息excel.      Apache的POI项目,是目前比较成熟的HSSF接口,用来处理Excel对象.其实POI不仅仅只能处理excel,它还可以处理word.PowerPoint.Visio.甚至Outl

随机推荐