vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码
主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer
this.$http.get(this.api.export, {
params: this.info,
// responseType: 'blob'
responseType: 'arraybuffer'
}).then(res => {
loading.close();
// 第一种
// let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
// let objectUrl = URL.createObjectURL(blob);
// window.location.href = objectUrl; // 第二种
let fileName = res.headers['content-disposition'].split("=")[1].split(";")[0];
let objectUrl = URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.download = decodeURIComponent(fileName);
link.href = objectUrl;
link.click();
})
-----
1.有时候,前端页面上需要展示后台接口返回给我们的一个二进制文件,比如图片,那么我们应该如何下载呢
js中有个Blob对象,一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。
2.创建Blob 对象
var debug = {hello: "world"};
var blob = new Blob(['后台返回的二进制文件'],{type : '该文件是什么类型的文件(MIME)'});
3.常用的文件类型有(MIME),根据需要返回怎样的文件,就填写怎样的MIME类型,也可以不写,写的话指定了下载的文件格式,不写,文件是什么格式,下载就是什么格式,根据项目需求.
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码的更多相关文章
- iOS 后台返回json解析出现的null的解决办法
在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...
- java后台简单从阿里云上传下载文件并通知前端以附件的形式保存
一. 首先开通阿里的OSS 服务 创建一个存储空间在新建一个Bucket 在你新建的bucket有所需的id和key 获取外网访问地址或者是内网 看个人需求 我使用的是外网(内网没用过 估计是部署到阿 ...
- Java后台通过jxl生成Excel表格
这里封装了一个工具类,将对象的list集合解析生成表格,只要按照参数要求传参就好了. 工具类代码如下: package com.hd.erpreport.utils; import java.io.F ...
- java 后台返回文件流到浏览器
package com.springbootblog.controller; import io.swagger.annotations.ApiImplicitParam;import io.swag ...
- 后台返回excel文件流,js下载
/** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...
- 阿里大鱼短信发送,放到项目中报错Java.lang.NoClassDefFoundError:com/aliyuncs/exceptions/ClientException,已解决
由于项目中使用的短信服务发送的消息太慢,所以把采用了阿里大鱼的短信服务,花费了几个小时,通过审核,发现可以单独运行.但是,放到web项目中会报错(Java.lang.NoClassDefFoundEr ...
- eclipse中部署web项目时报错java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener的解决方法
解决方案: 1.右键点击项目--选择Properties,选择Deployment Assembly,在右边点击Add按钮,在弹出的窗口中选择Java Build Path Entries 2.点击N ...
- vue项目中使用element的dialog中引入ztree却不能初始化解决办法
一开始我在 里边写的,发现获取不到,那么采用dialog自带的回调函数,窗口打开后opend进行处理, 结果:
- 前端vue项目-关于下载文件pdf/excel(三)
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
随机推荐
- .NetCore微服务Surging新手傻瓜式 入门教程 学习日志---结构简介(二)
原文:.NetCore微服务Surging新手傻瓜式 入门教程 学习日志---结构简介(二) 先上项目解决方案图: 以上可以看出项目结构可以划分为4大块,1是surging的核心底层,2,3,4都可以 ...
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...
- wepy小程序实现选项卡
先上效果: 本文是基于前面几篇文章: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 使用wepy开发微信小程序商城第三篇:购物车(布局篇) ...
- ZOJ 2679 Old Bill ||ZOJ 2952 Find All M^N Please 两题水题
2679:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1679 2952:http://acm.zju.edu.cn/onli ...
- [Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange
@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...
- cocos2d-x 3.0 android mk文件 之 自己主动遍历*.cpp文件
还记得上一篇android mk 文件的写法吗?传送门, 我们须要手动去加入 cpp文件.假设cpp一多,那不是要累死? LOCAL_PATH := $(call my-dir) include $( ...
- C++学习笔记(达内视频版)
达内C++(陈宗权主讲) 第一天: 课程分为Core C++(标准C++.不依赖操作系统)和Unix C++. 1.配置bash,运行.sh文件. vi bash_profile 在"pat ...
- FATFS在SD卡里,写入多行数据出的问题
串口接收的数据存入数组,然后把数组截取有效部分,存入SD卡里的一行没有问题 但是从SD卡读出这一行之后,重新写入SD卡就有了问题,经过调试发现,错误在于 \n 一直是这一串数据,为什么会出错呢??? ...
- ZOJ 1108 FatMouse's Speed (HDU 1160) DP
传送门: ZOJ:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=108 HDU :http://acm.hdu.edu.cn/s ...
- Your algorithm's runtime complexity must be in the order of O(log n).
Given a sorted array of integers, find the starting and ending position of a given target value. You ...