前端将二进制数据流转为文件_前端通过二进制流下载文件

JS下载文件两种方式总结:

下载文件主要分为两种形式,具体使用哪种方式取决于后台;

1.如果后台服务器的静态目录有可供下载的静态资源,后台接口返回文件路径,直接window.location.href=url或者window.open(url)或者创建a标签并指定a.href=url模拟点击进行下载即可;

2.如果后台服务器无可供下载的静态资源,返回的是一个文件流(response-type: application/octet-stream;charset=UTF-8 ),则使用第二种方式(将文件写入内存,并且创建a元素,a链接href属性指向内存中的文件,download属性指向要下载的文件名,模拟a元素的点击事件进行下载然后移除a元素)。

本文主要说明采用文件流的方式下载文件。

一、后台服务器有静态资源且是固定的文件名(GET方式下载文件)

window.location.href="http://www.域名/template.xlsx(请求返回的url地址)"

二、后台返回文件流

方案1:采用FileReader读取二进制流,下载读取后的结果

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

let blob = res.data;

let reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function(e) {

let a = document.createElement('a');

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

a.download = decodeURIComponent(fileName)//解码

a.href = e.target.result;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

})

方案二:通过URL.createObjectURL读取二进制流并返回一个对象URL,原理同上

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

//这里res.data是返回的blob对象,即对应的二进制流

let blob = res.data

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

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

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

downloadElement.href = href;

downloadElement.download = decodeURIComponent(fileName)//解码

document.body.appendChild(downloadElement);

downloadElement.click();

document.body.removeChild(downloadElement);

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

})

可能出现的问题:

无法获取headers的content-disposition字段

本次请求获取到fileName如下:

image.png

解决办法

在服务端设置header

Access-Control-Expose-Headers: Content-Disposition

(3)Access-Control-Expose-Headers

该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python采用哪种编码方式_Python编码格式的指定方式

参考自: http://python.jobbole.com/85852/, 原文探究的更深,有兴趣的可以去看看。简介来讲就是使用一种特殊的注释来声明编码格式,如何判断这种格式也用了很简单粗暴有效的办法--正则表达式;正则表达式如下&#xff1…

虚拟机连接网络_Parallels Desktop 16教程PD16虚拟机共享网络和桥接网络设置方法

许多用户在Mac上安装Parallels Desktop 16之后,想要设置Mac与虚拟机共享网络,那么共享网络和桥接网络设置有什么不同?该怎样设置?本篇就为大家分享PD16虚拟机共享网络和桥接网络设置方法。Parallels Desktop 16 for mac(pd虚拟机)…

如何批量转化成jpg格式_heic图片格式快速转换jpg,批量转换方法

heic图片是苹果手机独有的图片格式,电脑上或者其他设备是无法打开,需要将heic图片进行转换成jpg/bmp/png等电脑或其他设备可以的打开的格式,那今天就学习一下heic文件怎么转换的,将苹果的手机中的照片存到电脑上的某个文件夹&…

antd table 时间搜索_antd table按表格里的日期去排序操作

表格内容根据票据日期升序(这里是已经排序后的效果)上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳new Date(aTimeString).getTime()之后再用装换后的时间戳去比较,比较用到的函数是 .sort&am…

rf扫描枪_RF枪是什么,怎么用,在哪用?

RF枪,又称RF手持扫描枪、RF手持终端,是指利用无线射频技术(Radio Frequency Identification, RFID)完成数据采集、传输等功能,便于携带的数据采集终端,其特点就是坚固、耐用,可用在很多环境比较恶劣的地方。RF枪主要应…

macos ntfs插件_Mac下NTFS读写插件NTFS for Mac介绍

NTFS for Mac安装在Mac中如同一款插件一般支持Mac操作系统对NTFS文件系统正常读写。对于现在的Mac操作系统来说,经常会存在各种兼容方面的问题,所以我们在使用Mac的过程中遇到一些产品或操作无法完成需要通过其它方式来实现。NTFS for Mac就是这种情况下…

python中dump函数_python中实现php的var_dump函数功能

最近在做python的web开发(原谅我的多变,好东西总想都学着。。。node.js也是),不过过程中总遇到些问题,不管是web.py还是django,开发起来确实没用php方便,毕竟存在的时间比较短,很多不完善的地方。比如我在调…

查询去重_【Freya的MySQL课堂】DQL基础查询

MYSQL基础查询各位小伙伴们晚上好,今天是10月22号。我是你们的Freya。今天我们开始学习MySQL中的DQL语言。Do Not Stop Learning我的小课堂我爱学习,学习使我快乐今天你学习了吗?一、语法select 查询列表from 表名;二、特点1、查询列表可以是…

二阶偏微分方程组 龙格库塔法_有限单元法(Finite Element Method)实现声波方程模拟(Part 2)...

2.1 前言承接上一篇文章,前面我们已经介绍了一维声波方程有限元求解:蓝不是蓝:有限单元法(Finite Element Method)实现声波方程模拟(Part 1)​zhuanlan.zhihu.com这一部分将一维问题提升到二维问题。不知道大家有没有发…

mysql时间排序_mysql – 按日期和时间降序排序?

所有我想显示最近5个输入的数据,以获取特定的ID。我的sql查询是,SELECT id, name, form_id, DATE(updated_at) as dateFROM wp_frm_itemsWHERE user_id 11 && form_id9ORDER BY updated_at DESCupdated_at是DATETIME它按日期显示最后5个条目&am…

python图片转文字_【收藏】图片转成文字的方法总结,python批量图片转文字信息参考源码...

在日常办公或者学习中,往往存在这样一个工作场景,比如,“老王,我这里有一张图片,你把里面的文字信息给我整理出来”,都2021年了,你真的还在手敲图片文字信息么?那么还不赶紧收藏这篇…

mysql 写磁盘_图解MySQL | [原理解析] MySQL insert 语句的磁盘写入之旅

作者及简介:黄 炎,爱可生首席技术官;王 悦,爱可生研发团队成员,负责数据库管理平台相关项目的开发和故障排查,好奇 MySQL 技术原理及各类数据库实现方案。本文来源:转载自公众号-图解 MySQL*爱可…

监控mysql主从复制监控_shell脚本监控mysql主从同步状态

mysql做了主从同步之后,偶尔出现过几次主从同步报错或延迟,由于没有任何监控和报警机制,只有在应用程序报错的时候才能发现数据同步出问题了。所以写了个shell脚本用来检测mysql数据库的同步状态#!/bin/bash#monitor_mysql_slave statusUSERN…

apscheduler mysql_APScheduler (重点)

定时校正需求: mysql和redis两个系统, mysql增加数据成功, redis未必添加成功, 这样两个系统的数据可能出现偏差, 所以需要定期对mysql和redis的数据进行同步解决方案: 每天执行一次定时任务, 让mysql数据和redis数据进行同步crontab是linux系统一个内置命令, 依赖于linux系统,…

qpsk 锁相环_本科毕业设计课题—QPSK相干解调的MATLAB仿真(4)

继续看参考资料!现在常用的数字调制方式有二相移相键控(BPSK)、正交移相键控(QPSK)、偏移四项移相键控(OQPSK)、最小移频键控(MSK)等。它们具有相同的功率效率。BPSK 频谱利用率差,抗非线性能力差,实现简单;QPSK频谱利用率好&…

c语言程序后退_c语言中向后退一格是啥符号?

展开全部是 \b,也就是backspace,这是一个转义32313133353236313431303231363533e4b893e5b19e31333337393466字符,详解如下:所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示。而C中定义了一些字母前加"\"来表示…

mysql数据库行业应用_腾讯云发布MySQL 8.0数据库 可应用至更多行业场景

7月8日,腾讯云正式发布了MySQL 8.0数据库。据悉,该数据库相比MySQL官方版本,无论是单机模式、异步模式还是同步模式下,读写性能都取得了大幅提升。据腾讯云数据库相关负责人介绍,采用MySQL 8.0内核的实例最高QPS(每秒查…

中控ecs700 mysql_浙大中控ECS700工程指导手册.pdf

浙大中控ECS700工程指导手册VisualFieldWARNING: Indicates information that a potentially hazardous situation which, if not avoided,could result in serious injury or death.Risk of electrical shock: Indicates information that Potential shock hazard whereHAZARD…

postgresql是如何求年龄的_Postgresql 通过出生日期获取年龄的操作

三个基础的时间表示函数 current_date/current_time/now()select current_date ;返回当前日期以 年-月-日(yyyy-mm-dd)的形式:2019-01-10select current_time;返回当日时间以 时:分:秒时区(hh:mm:ss )的形式:17:49:11.58530808select now();返回当前时间…

python关闭浏览器删除session_Django操作session 的方法

session是存放在服务端的,在django中使用session必须要先在数据库中创建django_session表,session相关信息都要依赖此表获取sessionrequest.session[status]request.session.get(status)#一般用get,无此键返回None不报错设置session#在使用se…