js使用Blob的方式实现excel表格的下载(流文件下载)

js前端下载工具

getToken 为了获取token, 不需要的可以去除
downLoadXlsx中的data, 是数据的搜索参数(根据参数搜索出的结果进行导出), 不需要搜索参数的可以去除data

import axios from 'axios'
import { getToken } from '@/utils/auth'const mimeMap = {xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',zip: 'application/zip'
}const baseUrl = process.env.VUE_APP_BASE_API
export function downLoadZip(str, filename) {var url = baseUrl + straxios({method: 'get',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() }}).then(res => {resolveBlob(res, mimeMap.zip)})
}export function downLoadXlsx(str, filename, data) {var url = baseUrl + str;axios({method: 'post',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() },data: data}).then(res => {resolveBlob(res, mimeMap.xlsx)})
}
/*** 解析blob响应内容并下载* @param {*} res blob响应内容* @param {String} mimeType MIME类型*/
export function resolveBlob(res, mimeType) {const aLink = document.createElement('a')var blob = new Blob([res.data], { type: mimeType })// //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')var contentDisposition = decodeURI(res.headers['content-disposition'])var result = patt.exec(contentDisposition)var fileName = result[1]fileName = fileName.replace(/\"/g, '')aLink.href = URL.createObjectURL(blob)aLink.setAttribute('download', fileName) // 设置下载文件名称document.body.appendChild(aLink)aLink.click()document.body.appendChild(aLink)
}

工具的使用:

1.前端代码:

function downLoad(){// /staffInfo/export为后端接口// fileName.xlsx" 为文件名称// this.exportParams /// 数据搜索参数downLoadXlsx("/student/export", "fileName.xlsx", this.exportParams)
}

2.后端代码:

@RestController
@RequestMapping("/student")
public class student{@PostMapping("/export")public void export(@Map<String, Object> params, HttpServletRequest request, HttpServletResponse response){BufferedOutputStream os = null;ServletOutputStream outputStream = null;try {// 1.设置响应头response.setCharacterEncoding("utf-8");response.setContentType("multipart/form-data");response.setHeader("Content-Disposition","attachment;fileName=" + setFileDownloadHeader(request, "fileName.xlsx"));outputStream = response.getOutputStream();// 2.从response获取输出流,将excel write到输出流程中os = new BufferedOutputStream(outputStream);// 3.根据params参数, 搜索想要导出的数据// TODO. 获取listList<Student> students = .....;// 4.将数据放入,workbooke,  再调用workbooke.write(os), 可以看往期文章} catch (Exception e) {e.printStackTrace();} finally {try {if(os != null) {os.flush();os.close();}if(outputStream != null){outputStream.close();}} catch (IOException e) {e.printStackTrace();}}}
}

js使用Blob的方式实现excel表格的下载(流文件下载)相关推荐

Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
最近在做blob流导出相关功能,其中需要导出excel.csv.word.zip压缩文件之类的,在导出excel和word中需要知道对应的content-type属性,关于blob格式如下: 后缀 M ...
隐藏列表的另一种方式，Excel表格怎么创建组？
都2022年了,还在对表格进行隐藏吗?Excel表格中有个创建组的功能可以快速隐藏表格的同时也可以快速展开表格,对表格进行修改,这是隐藏列表的另一种方式,那么Excel表格怎么创建组呢? 方式一:隐藏 ...
使用 poi 通过浏览器方式导出Excel表格（导出字段与表格字段不一样且取值逻辑改变）
使用 poi 通过浏览器方式导出Excel表格(导出字段与表格字段不一样且取值逻辑改变) 思路:拿到表格页面查询的结果作为查询条件,表格页面的url和点击导出按钮的url是一样的,按钮的url多一个参 ...
java下载Excel表格(ajax处理流文件)
java下载Excel表格(ajax处理流文件) 遇到的问题: ① 导出Excel,处理大量的数据 ② 后端使用Apache POI中的SXSSFWorkbook导出功能,不使用xlsx.core.m ...
通过DJANGO实现从WEB端对服务器的批量或单机巡检,打印到EXCEL表格并下载
后台的实现和前面写的LINUX服务器批量巡检的PYTHON脚本,是一样的,只不过增加了单机检查和EXCEL下载的功能,并且可以从WEB端巡检,不用登陆服务器就能实现 urls.py url(r'^in ...
JS导出Echarts图标数据为Excel表格
开发需求需要在Echarts图表右上角添加一个按钮,将图表数据下载为Excel,下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求 HTML结构: <templa ...
NPOI ADO office wps 四种方式读excel表格
有的客户装了不同的excel程序,所以做了四种excel文件的读写,在一定程度上可以适应各种情况的客户. npoi :对公式,某些日期兼容的不好,速度很快,不需要装excel程序 ado::对某些日期 ...
Python实现Excel表格图片下载-腾讯文档收集表下载Excel表格后下载图片
代码目的 QQ腾讯文档收集表下载本地后变成Excel表格,可是腾讯文档内的图片变成了链接,为了不手动保存图片,所以写出以下代码来实现自动保存图片. 代码原理准备工作: python编译器 pytho ...
前端js判断上传是否为EXCEL表格问题
直接贴代码吧~JS部分输入框部分: 转载于:https://www.cnblogs.com/aijiajia1314/p/9517541.html

js使用Blob的方式实现excel表格的下载(流文件下载)

js使用Blob的方式实现excel表格的下载(流文件下载)

js使用Blob的方式实现excel表格的下载(流文件下载)相关推荐

最新文章

热门文章