主要是在请求参数后面加上{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后台返回的是信息流表格如何下载解决乱码的更多相关文章

  1. iOS 后台返回json解析出现的null的解决办法

    在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...

  2. java后台简单从阿里云上传下载文件并通知前端以附件的形式保存

    一. 首先开通阿里的OSS 服务 创建一个存储空间在新建一个Bucket 在你新建的bucket有所需的id和key 获取外网访问地址或者是内网 看个人需求 我使用的是外网(内网没用过 估计是部署到阿 ...

  3. Java后台通过jxl生成Excel表格

    这里封装了一个工具类,将对象的list集合解析生成表格,只要按照参数要求传参就好了. 工具类代码如下: package com.hd.erpreport.utils; import java.io.F ...

  4. java 后台返回文件流到浏览器

    package com.springbootblog.controller; import io.swagger.annotations.ApiImplicitParam;import io.swag ...

  5. 后台返回excel文件流,js下载

    /** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...

  6. 阿里大鱼短信发送,放到项目中报错Java.lang.NoClassDefFoundError:com/aliyuncs/exceptions/ClientException,已解决

    由于项目中使用的短信服务发送的消息太慢,所以把采用了阿里大鱼的短信服务,花费了几个小时,通过审核,发现可以单独运行.但是,放到web项目中会报错(Java.lang.NoClassDefFoundEr ...

  7. eclipse中部署web项目时报错java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener的解决方法

    解决方案: 1.右键点击项目--选择Properties,选择Deployment Assembly,在右边点击Add按钮,在弹出的窗口中选择Java Build Path Entries 2.点击N ...

  8. vue项目中使用element的dialog中引入ztree却不能初始化解决办法

    一开始我在 里边写的,发现获取不到,那么采用dialog自带的回调函数,窗口打开后opend进行处理, 结果:

  9. 前端vue项目-关于下载文件pdf/excel(三)

    最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...

随机推荐

  1. 【Codeforces Round #431 (Div. 1) B】

    [链接]h在这里写链接 [题意] 场上有 n 个点,它们分别向上与向右在不同时刻开始运动,相遇则改变移动方向,求最终这些点到达的坐标. [题解] 先把每个点的坐标都往它本该移动的方向相反的方向退ti个 ...

  2. Log4net.confager配置

    <?xml version="1.0" encoding="utf-8"?><log4net>  <level value=&qu ...

  3. MongoDbHelper 帮助类(下)

    对MongoDbHelper帮助类进行了一下整合,但是代码中一个方法需要将string类型转化为BsonValue类型一直出错.所以欢迎留言指正 using System; using System. ...

  4. 1、初识python

    1.linux下运行python脚本时,在第一行通过“#!/usr/bin/env python”指定python h.py <=> ./h.py 具有相同的效果 (h.py需要有执行权限 ...

  5. Mac 环境下svn服务器的配置

    Mac 环境下svn服务器的配置 本文目录 • 一.创建代码仓库,用来存储客户端所上传的代码 • 二.配置svn的用户权限 • 三.使用svn客户端功能 在Windows环境中,我们一般使用Torto ...

  6. php ignore_user_abort()实现计划(定时执行)任务功能

    ? 1 2 3 4 5 6 7 8 9 10 11 12 <?php     ignore_user_abort(TRUE);  //关掉浏览器,PHP脚本也可以继续执行.     set_ti ...

  7. Java反射学习总结二(用反射调用对象的私有属性和方法)

    大家都知道正常的调用是不可以访问对象的private修饰的属性和方法的,这也是Java的封装性原则. 但是有没有方法可以强制去访问对象的private修饰的属性和方法呢?那就是用反射!(这个可能在面试 ...

  8. PHP SPL标准库之数据结构栈(SplStack)介绍(基础array已经可以解决很多问题了,现在开始解决问题)

    PHP SPL标准库之数据结构栈(SplStack)介绍(基础array已经可以解决很多问题了,现在开始解决问题) 一.总结 SplStack就是继承双链表(SplDoublyLinkedList)实 ...

  9. 【Codeforces Round #185 (Div. 2) C】The Closest Pair

    [链接] 链接 [题意] 让你构造n个点,去hack一种求最近点对的算法. [题解] 让x相同. 那么那个剪枝就不会起作用了. [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] # ...

  10. Velocity浅析及与Jsp、Freemarker对比 分类: B1_JAVA 2014-07-21 09:14 637人阅读 评论(0) 收藏

    转载自:http://www.cnblogs.com/petermsdn/archive/2011/05/06/2039178.html Velocity 是一个基于java 的模板引擎(templa ...