vue中后端做Excel导出功能返回数据流前端的处理操作

项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。

先看下效果图:

页面效果:

点击 导出Excel 调用导出接口成功了:

后台返回的数据流,一堆看不懂的乱码:

接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出:

虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios

import axios from 'axios'

// 导出Excel公用方法
export function exportMethod(data) {
  axios({
    method: data.method,
    url: `${data.url}${data.params ? '?' + data.params : ''}`,
    responseType: 'blob'
  }).then((res) => {
    const link = document.createElement('a')
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)

    // link.download = res.headers['content-disposition'] //下载后文件名
    link.download = data.fileName //下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }).catch(error => {
    this.$Notice.error({
      title: '错误',
      desc: '网络连接错误'
    })
    console.log(error)
  })
}

在使用的页面中引入方法:

import { exportMethod } from '@/libs/util'

在methods导出的方法里,调用共用导出方法。

注意:因为我们后台用的是get方法,所以传递get请求并且拼接要传的参数,如果是post请求,就把传递的get改成post,传递数据改成传data数据对象,params去掉,公共方法里把url上拼接的参数也去掉,直接 接收url路径即可,再接收一个data就行了

// 导出会诊接诊量统计表
    exportDepReceRank() {
      let myObj = {
        method: 'get',
        url: exportDepartmentRankUrl,
        fileName: 'XX医院—各科室会诊接诊量统计',
        params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`
      }
      exportMethod(myObj)
    },

最后成功导出Excel的效果图:

补充知识:Vue项目利用axios请求接口下载excel(附前后端代码)

据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过window.location来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式。

方法一:通过a标签

// href为文件的存储路径或者地址,download为问文件名

<a href="/images/logo.jpg" rel="external nofollow" download="logo" />

优点:简单方便。

缺点:这种下载方式只支持Firefox和Chrome不支持IE和Safari,兼容性不够好。

方法二:通过window.location

window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'

优点:简单方便。

缺点:只能进行get请求,当有token校验的时候不方便。

方法三:通过请求后台接口

// download.js
import axios from 'axios'

export function download(type, name) {
 axios({
  method: 'post',
  url: 'http://127.0.0.1:8080/api/download',
  // headers里面设置token
  headers: {
   loginCode: 'xxx',
   authorization: 'xxx'
  },
  data: {
   name: name,
   type: type
  },
  // 二进制流文件,一定要设置成blob,默认是json
  responseType: 'blob'
 }).then(res => {
  const link = document.createElement('a')
  const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', `${name}.xlsx`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
 })
}
// download.java
@RequestMapping(value = "/api/download",produces = "application/octet-stream", method = RequestMethod.POST)
public void downloadTemplate(@RequestBody Map<String,Object> paramsMap, HttpServletResponse response) {
  try {
    if (paramsMap.get("type").equals("xxx") && paramsMap.get("name").equals("xxx")) {
      String[] str = new String[]{"区县","所属省份","所属地市"};
      Workbook workbook = ExportExcel.exportExcel("行政区划表模版", str, null, "yyyy-MM-dd");
      download(response, workbook, "CityDict");
    }
  } catch (Exception e) {
    e.printStackTrace();
  }
}

private void download(HttpServletResponse response, Workbook workbook, String fileName) {
  try {
    response.setContentType("application/octet-stream;charset=UTF-8;");
    response.addHeader("Content-Disposition", "attachment;fileName=" + fileName + ".xlsx");
    ByteArrayOutputStream by = new ByteArrayOutputStream();
    OutputStream osOut = response.getOutputStream();
    // 将指定的字节写入此输出流
    workbook.write(osOut);
    // 刷新此输出流并强制将所有缓冲的输出字节被写出
    osOut.flush();
    // 关闭流
    osOut.close();
  } catch (IOException e) {
    LogUtils.getExceptionLogger().info("下载模板错误:{}", e.getMessage());
  }
}

优点:可以在headers里面设置token,文件是java代码中生成的,生成的文件比较灵活。

缺点:实现起来比较复杂。

以上这篇vue中后端做Excel导出功能返回数据流前端的处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 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实现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项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • 详解Java如何实现百万数据excel导出功能

    目录 前言 1.异步处理 1.1 使用job 1.2 使用mq 2.使用easyexcel 3.分页查询 4.多个sheet 5.计算limit的起始位置 6.文件上传到OSS 7.通过WebSocket推送通知 8.总条数可配置 9.order by商品编号 总结 前言 最近我做过一个MySQL百万级别数据的excel导出功能,已经正常上线使用了. 这个功能挺有意思的,里面需要注意的细节还真不少,现在拿出来跟大家分享一下,希望对你会有所帮助. 原始需求:用户在UI界面上点击全部导出按钮,就能导

  • vue中如何下载excel流文件及设置下载文件名

    概述 导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • Asp.Net Core实现Excel导出功能的实现方法

    目录 安装 ClosedXML 将数据导出成 CSV 文件 将数据导出成 XLSX 文件 下载 Excel 在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨论下如何使用 ClosedXML 实现 Excel 数据导出. 安装 ClosedXML 如果想实现 Excel 的导出功能,在 Asp.Net Core 中有很多的dll可以做到,其中的一个叫做 Cl

  • Java中EasyPoi多sheet导出功能实现

    EasyPoi 多sheet导出 序言:之前一直想开始写博客,都没有时间行动起来,今天终于开始了我的第一篇博客- 最近接到一个导出excel功能的需求,该功能主要难点是 多sheet页 导出合并单元格(跨行.跨列) 多表头合并 我开始的想法是如果采用poi来实现这个功能,业务逻辑可能会有点复杂,于是我使用了easyPoi--一个so easy的工具,它的特点就是非常方便,用jQuery的一句来说就是:write Less,Do More. 话不多说,接下来分享一下我的代码(我使用的是SSH框架搭

  • vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

  • Vue 中使用vue2-highcharts实现top功能的示例

    1.要实现的效果如下图: 2.首先项目中引用vue2-highcharts package.json中如下: 在命令行中输入: cnpm install vue2-highcharts 3.页面代码如下: <template> <div > <div> <div id="transparent-header" class="rank-head container" > <img src="../asse

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • vue中使用sessionStorage记住密码功能

    sessionStorage和localStorage比较 二者区别 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. localStorage和sessionStorage操作 localStorage和sessionStor

随机推荐