Vue 采用blob下载后端返回的excel流文件乱码问题

  1. 没有文件服务器, 前后端采用文件流方式下载,后端返回二进制乱码时,前端使用blob对象进行处理

    2.采用的是axios请求方式

  2. this.$http.post("download", { fileName: file.filename })

    .then(function(response) {

    let blob = new Blob([response.data], {type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8‘});

    let downloadElement = document.createElement(‘a‘);

    let href = window.URL.createObjectURL(blob); //创建下载的链接

    downloadElement.href = href;

    downloadElement.download = ‘xxx.xlsx‘; //下载后文件名

    document.body.appendChild(downloadElement);

    downloadElement.click(); //点击下载

    document.body.removeChild(downloadElement); //下载完成移除元素

    window.URL.revokeObjectURL(href); //释放掉blob对象

    })

4.分享链接 https://www.oschina.net/question/3910533_2283267

原文地址:https://www.cnblogs.com/wenjuan-blog/p/9346742.html

时间: 2024-10-18 03:06:54

Vue 采用blob下载后端返回的excel流文件乱码问题的相关文章

前端接收后端返回的文件流导出Excel

需求:接收后端返回的文件流导出Excel 自己项目中遇到过,亲测有效 情况二使用过程中解决的问题: 1.直接接受的文件流下载格式为txt且乱码.需要通过 下面这句代码来转成Excel: let url = new Blob([xmlHttp.response], { type: 'application/vnd.ms-excel' }); 2.文件名乱码,显示数字单词组成的随机字符串.需要后端在header中返回文件名,转义获取 //文件名 link.download = decodeURICo

下载不含数据EXCEL的固定表头模版(标准EXCEL只含有列头),然后上传EXCEL.显示成功和上传失败的EXCEL连接

<div id="import" runat="server" visible="false"> Step1:<asp:HyperLink ID="HyperLink1" NavigateUrl="~/CommonTemplate/设备清单模版.xlsx" runat="server">下载模版</asp:HyperLink><br />

Android采用HttpClient下载图片

在上一章中谈到Android采用HttpURLConnection下载图片,本章使用HttpClient下载图片 HttpURLConnection与HttpClient的差别: HttpClient是个非常不错的开源框架(org.appache.http),封装了訪问http的请求头,參数,内容体.响应等等,使用起来更方面更强大. HttpURLConnection是java的标准类,能够实现简单的基于URL请求.响应功能,什么都没封装.用起来太原始.比方重訪问的自己定义,以及一些高级功能等.

采用EXTJS ajax 解析返回json

片段主题:采用EXTJS ajax 解析返回json 知识分类:EXTJS 记录时间: 20150708 功能描述:点击图标根据ID ,AJAX提交后返回json 得到结果,显示图片. 学习心得:初学特别注意, 再想返回JSON 获得数据的情况下必须 使用ajax 的属性 success: function (data){} 来获取否者将只能的到返回的对象(object) ,然而并不会得到json数据(换句话说也就是得不到值). 片段代码: { iconCls : 'silk-config',

vue+iview中的table表格导出excel表格

一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 Export2Excel.js两个文件实现 1.Blob.js 和 Export2Excel.js文件 链接:https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密码:3h82 2.把Blob.js 和 Export2Excel.js文件添加到src文件夹

对后端返回的数据进行适配

为什么要做接口适配 同一个功能,后端返回的数据结构经常变动,导致前端写的逻辑也得相应的修改,而接口适配就是为了解决此问题,不管后端接口怎么变动,前端只需要调整适配的数据部分,而不会对页面已有逻辑造成影响. 请求接口的适配 拿登录功能来说,有账号密码字段. 请求登录(以前) export const Login = data => { return ajax.post('/sso/login', { username: data.username, password: data.password

C#下载http/https的pdf、excel等文件(非在线打开,绕开插件)

非本服务器文件,如PDF,excel等,下载一般是通过href='远程文件的http或者https'的方式下载,但是如果浏览器已经有PDF插件了,则用href不是下载,而是在线打开了,影响体验,所以远程服务器文件下载改为后台的方式下载,可以绕开插件.代码如下: string url = hidFilePath.Value;//文件的地址:如http://emec.h.c/pdf/test.pdf string filename = hidFileName.Value;//导出的文件名称:如测试导

pdf流文件的展示、下载、打印

背景:合同(后台返回pdf流文件)展示.下载.打印,基于angular4 场景区分: 1.checkout页面 -- post接口,入参为offering.shippingInfo.invoice等(body),返回生成合同的pdf流文件: 2.orderList.orderDetail页面 -- get接口,入参contentId(生成合同在内容管理保存对应的id,url),返回对应合同的pdf流文件. 需求补充说明: 在一个弹出dialog,合同展示在中间部分,footer部分为 下载.打印

Jmeter—生成excel结果文件

相信很多用jmeter进行接口测试的童鞋都会有这样的苦恼:同时执行上百条测试案例,如何能轻松加愉快地检查案例输出结果?仅仅靠jmeter的断言.debug sampler.察看结果树等是无法满足我们要求的!下面跟大家分享一个小技巧,利用beanshell和外部jar包来生成excel结果文件. Jmeter接口自动化脚本编写流程 1.下载开源jar包 下载jxl.jar, fastjson.jar(本文以json接口为例),并放到jmeter的lib目录下. 2.开发外部jar包 (1)创建CW