后端返回字符流,前端处理进行excel文件导出操作
针对于这种的文件导出,最关键的是响应类型的设置,也就是responseType的设置(responseType:"arraybuffer"或者responseType:"blob"),这两种类型都是可以的。responseType表明返回服务器返回的数据类型。
具体代码如下:
方法一:(自己在具体项目上的应用)
// 接口调用方式(这是我的项目中的调用方式,自己应用具体看自己的设置)
export const exportSysOrgUser = (data) => {
return api.post(`${server.patchBase}/sysOrgUser/exportSysOrgUser`, data,, {responseType:"arraybuffer"})
}
let result = this.exportSysOrgUser(params); // 接口调用返回的结果
// 文件导出处理
let content = result;
let fileName = "用户数据.xls";
let bolb = new Blob([content], { type: "application/vnd.ms-excel" });
if ("download" in document.createElement("a")) {
let link = document.createElement("a");
link.download = fileName;
link.style.display = "none";
link.href = URL.createObjectURL(bolb);
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
} else {
navigator.msSaveBlob(bolb, fileName);
}
方法二:(网上看见的用axios方式请求)
axios({
url:'http://192.168.0.7:8010/sysOrgUser/exportSysOrgUser', // 请求路径
method:'post', //请求方式
headers:{
contentType: 'application/json;charset=UTF-8',
Authorization: this.$storage.getSession("token") // token
},
params: params, // 参数
responseType: 'blob', // 表明返回服务器返回的数据类型
}).then((res) => {
let data = res.data
const blob = data
const fileName = '订单导出.xls'
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)
})
不管哪一种方式,最重要的是responseType:"arraybuffer"或者responseType:"blob"的设置,这个属性是必须传的!!!!
另外,在做的时候发现了一个很严重的问题,在自己的项目中上面的俩种方式导出的文件是乱码的,这个问题困扰我2天时间,经过排查和查资料,最终发现是前端使用的mock和responseType:"blob"之间冲突,导致responseType:"blob"没有生效。具体原因暂时还没搞明白,我把mock关闭,就一切正常了!!!
如果有人在自己的项目中用到mock数据的话,一定要注意这一点!
后端返回字符流,前端处理进行excel文件导出操作的更多相关文章
- loadrunner实现excel文件导出操作
项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...
- io流(文件字符流(FileReader,FileWriter文件的复制))
文件字符流(FileReader,FileWriter文件的复制) 文件的复制 效率低的方法 注意:字符流需要刷新操作,字节流不需要,只有刷新后才可以将程序中的内容导入到目标文件中 package c ...
- C# Excel文件导入操作
Excel文件导出的操作我们经经常使用到,可是讲一个Excel文档导入并显示到界面还是第一次用到. 以下简介下在C#下怎样进行Excel文件的导入操作. 首先加入两个引用 using System.I ...
- 我的视频网站开通,第一个 ArcGIS文本文件,excel文件生成点操作发布,希望大家支持
网站地址:http://i.youku.com/gisoracle第一个学习视屏:ArcGIS文本文件,excel文件生成点操作http://v.youku.com/v_show/id_XNzM3Nz ...
- php excel文件导出之phpExcel扩展库
php Excel 文件导出 phpExcel 官网 http://phpexcel.codeplex.com/ /** * 导出特定文件 * 依据详细情况而定 */ public function ...
- 使用npoi插件将excel文件导出
大致流程:前端使用URL地址的方式跳转到action后返回file类型数据 js: window.location.href = '/Home/index?Id=' + id 后台代码: /// &l ...
- JAVA对Excel文件进行操作
JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...
- Python中xlrd和xlwt模块使用方法 (python对excel文件的操作)
本文主要介绍可操作excel文件的xlrd.xlwt模块.其中xlrd模块实现对excel文件内容读取,xlwt模块实现对excel文件的写入. 安装xlrd和xlwt模块 xlrd和xlwt模块不是 ...
- excel文件导出和导入
pom.xml添加依赖 @RestController @RequestMapping(value = "/excel") public class ExpImpExcelCont ...
- php excel文件导出之二 图像导出
PHP文件导出 之图像 和 文字同一时候导出 事实上之前写了个php文件导出.跟这个极为相似,由于项目须要对图像进行导出.查询一番.又写了一个, 这个能实现图像的导出(仅仅能是本地图像,不能使用远程图 ...
随机推荐
- make编译工具教程
make编译工具教程 背景 CC++编译起来目录结构多的情况需要脚本完成搜索编译-> make 第一课 第三课 makefile常用编程语法: 1 pipe管道符号,用;把命令相连接. 这样就 ...
- Prettier 与 ESLint 对函数名后空格的处理
问题 Prettier 格式化 JavaScript 代码之后,默认不会在函数与 () 添加空格,而 ESLint 默认情况下则要求函数与 () 之间必须有一个空格. 保留空格的方案配置 方案 1 在 ...
- vim重复、删除、复制、粘贴命令
0.选中 V+(上.下键) 表示选中 1.删除 1.输入10x,删除10个连续字符 2.输入3dd,将会删除3行文本 在普通模式下,你还可以使用dw或者daw(delete a word)删除一 ...
- 《Vue.js 3.x高效前端开发(视频教学版)》简介
#好书推荐##好书奇遇季#<Vue.js 3.x高效前端开发(视频教学版)>,京东当当天猫都有发售.本书配套示例源码.PPT课件.思维导图.数据集.开发环境与答疑服务. 本书通过对Vue. ...
- Python——01.环境及安装
Python介绍 -- Python是解释型,面向对象的语言,程序结构简洁,清晰 -- Python解释器分类: CPython(官方解释器):用C语言编写的Python解释器 PyPy:用Pytho ...
- 网络很慢mtu设置
[root@db-***** etc]# cat /etc/rc.local #!/bin/sh # # This script will be executed *after* all the ot ...
- 不符合Json格式都能被Gson 转成对象使用!!!
问题描述: 在与前端测试的时候,前端下发商品档案,结构为{""items":[{A对象},{B对象},{C对象}]},他下发了504条数据,但我们插入数据库的时候 只有1 ...
- Linux基本概念
目录 1. 内核.内核态和用户态 2. 用户和组 3. 文件和文件系统 4. I/O模型 5. 程序.进程.线程和协程 6. shell.终端和会话 1. 内核.内核态和用户态 内核是指管理和分配 ...
- js实现光标移入和移出元素事件
js实现光标移入和移出元素事件 效果实现: 代码: i标签添加事件 var onmouse = 'onmouseover = "overshow(this)" onmouseout ...
- .net基础—委托和事件
委托 委托是一种引用类型,表示对具有特定参数列表和返回类型的方法的引用. 在实例化委托时,可以将其实例与任何具有兼容签名和返回类型的方法相关联. 可以通过委托实例调用方法.可以将任何可访问类或结构中与 ...