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


Posted in Javascript onSeptember 08, 2020

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

先看下效果图:

页面效果:

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

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

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

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

vue中后端做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中后端做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导出功能返回数据流前端的处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
Vue.js快速入门教程
Sep 07 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 #Javascript
浅析JavaScript 函数柯里化
Sep 08 #Javascript
You might like
php实现的简单日志写入函数
2015/03/31 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
详解python polyscope库的安装和例程
2020/11/13 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
暑期实习鉴定
2013/12/16 职场文书
工地门卫岗位职责
2013/12/30 职场文书
司马光教学反思
2014/02/01 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
应急处置方案
2014/06/16 职场文书
学校社会实践活动总结
2014/07/03 职场文书
四查四看整改措施
2014/09/19 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
js不常见操作运算符总结
2021/11/20 Javascript