vue 二进制文件的下载(解决乱码和解压报错)

问题描述:项目中使用的是vue框架进行开发,因为文件下载存在权限问题,所以并不能通过 a 链接的 href 属性直接赋值 URL进行下载,

(如果你的文件没有下载权限,可以直接通过href属性赋值URL的方法进行文件下载),所以使用vue-resource请求文件流后,借助Blob对象实现下载,

但是仍然存在解压的问题(针对压缩文件),而 docx等文档格式主要出现的就是乱码问题。

问题截图

出现以上解压问题的代码,通过vue-resource请求二进制文件

downloadFile(attachment) {let fileName = attachment.displayName;this.$http.get(strategyDownloadUrl + '/' + attachment.id).then((res) => {if(typeof(res.data) == 'string'){var blob = new Blob([res.data], {type:'application/octet-stream'})if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlob方法返回bool值navigator.msSaveBlob(blob, fileName);//本地保存} else {var link = document.createElement('a');//a标签下载link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);}}else{swal(res.data.msg,'','info')//个人弹窗忽视}})},

采用原生对象XHRHttpRequest进行文件请求(也可通过jquery的ajax进行文件请求),可以正常解压文

 
downloadFile(attachment) {
let that = this
var ajax = new XMLHttpRequest()
ajax.responseType = 'blob'
ajax.open("GET",strategyDownloadUrl + '/' + attachment.id,true)
ajax.setRequestHeader('X-Authorization','Bearer ' + this.$store.state.token)
ajax.onreadystatechange = function(){
if(this.readyState == 4) {
if(this.status == 200) {
//console.log(this.response) // should be a blob
if(this.response.type == "application/octet-stream"){
that.downloadHandler(this.response,attachment.displayName)
}else{
swal('您要下载的资源已被删除!','' , 'error')
}
} else if(this.responseText != "") {
//console.log(this.responseText);
}
} else if(this.readyState == 2) {
if(this.status == 200) {
this.responseType = "blob"
} else {
this.responseType = "text"
}
}
};
ajax.send(null);
},
downloadHandler(content, filename) {
var eleLink = document.createElement('a')
eleLink.download = filename
eleLink.style.display = 'none'
// 字符内容转变成blob地址
var blob = new Blob([content],{type: "application/octet-stream"})
eleLink.href = URL.createObjectURL(blob)
// 触发点击
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
},

如有不正确的地方,请指正交流,共同进步。

转载于:https://www.cnblogs.com/note-blog/p/8065199.html

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

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

相关文章

浅谈云计算与数据中心计算

文/林仕鼎 云计算概念发端于Google和Amazon等超大规模的互联网公司,随着这些公司业务的成功,作为其支撑技术的云计算也得到了业界的高度认可和广泛传播。时至今日,云计算已被普遍认为是IT产业发展的新阶段,从而被赋予了很多产业和…

数据挖掘:如何寻找相关项

导读:随着大数据时代浪潮的到来数据科学家这一新兴职业也越来越受到人们的关注。本文作者Alexandru Nedelcu就将数学挖掘算法与大数据有机的结合起来,并无缝的应用在面临大数据浪潮的网站之中。 数据科学家需要具备专业领域知识并研究相应的算法以分析对…

00030_ArrayList集合

1、数组可以保存多个元素,但在某些情况下无法确定到底要保存多少个元素,此时数组将不再适用,因为数组的长度不可变 2、JDK中提供了一系列特殊的类,这些类可以存储任意类型的元素,并且长度可变,统称为集合 3…

1.3tf的varible\labelencoder

1.tf的varible变量 import tensorflow as tf #定义变量--这里是计数的变量 statetf.Variable(0,namecounter) print (state.name) #输出变量值 onetf.constant(1) #常量new_valuetf.add(state,one) updatetf.assign(state,new_value)#初始化所有变量 inittf.initialize_all_var…

多线程编程指南

1. 多线程编程指南1--线程基础 线程编程指南1--线程基础 Wednesday, 29. March 2006, 11:48:45 多线程 本文出自:BBS水木清华站 作者:Mccartney (coolcat) (2002-01-29 20:25:25) multithreading可以被翻译成多线程控制。与传统的UNIX不同,一个传统 的UNIX进…

路由器和猫的区别

路由器和猫的区别 网络在我们现在生活中必不可少,我们链接互联网经常需要用到猫和路由器,但是依然有很多菜鸟根本不知道什么是猫什么是路由器,至于猫和路由器怎么使用就更不知道了,下面给大家详细的讲解下路由器和猫的区别。 路由器和猫的用途和链接位置不一样,如下图: 路由器:…

kafka 命令行命令大全

kafka 脚本 connect-distributed.sh connect-mirror-maker.sh connect-standalone.sh kafka-acls.sh kafka-broker-api-versions.sh kafka-configs.sh kafka-console-consumer.sh kafka-console-producer.sh kafka-consumer-groups.sh kafka-consumer-perf-test.sh kafka-dele…

python 第三方模块之 APScheduler - 定时任务

介绍 APScheduler的全称是Advanced Python Scheduler。它是一个轻量级的 Python 定时任务调度框架。APScheduler 支持三种调度任务:固定时间间隔,固定时间点(日期),Linux 下的 Crontab 命令。同时,它还支持…

hadoop分布式搭建

一,前提:下载好虚拟机和安装完毕Ubuntu系统。因为我们配置的是hadoop分布式,所以需要两台虚拟机,一台主机(master),一台从机(slave) 选定一台机器作为 Master 在 Master …

xvid 详解 代码分析 编译等

1. Xvid参数详解 众所周知,Mencoder以其极高的压缩速率和不错的画质赢得了很多朋友的认同! 原来用Mencoder压缩Xvid的AVI都是使用Xvid编码器的默认设置,现在我来给大家冲冲电,讲解一下怎样使用Mencoder命令行高级参数制作Xvid编…

很多人喜欢露脚踝你觉得时尚吗?

当然是 时尚时尚最时尚的 露!****脚!脖!子!image.png人生就是这么奇怪 美容整形可以让你拥有想要的五官 做个手术健个身能让你拥有梦寐的线条 唯独身高这事很难改变(说多了都是泪) 氮素呢 再难也难不倒众位…

深度学习之生成式对抗网络 GAN(Generative Adversarial Networks)

一、GAN介绍 生成式对抗网络GAN(Generative Adversarial Networks)是一种深度学习模型,是近年来复杂分布上无监督学习最具前景的方法之一。它源于2014年发表的论文:《Generative Adversarial Nets》,论文地址&#xf…

深度学习之目标检测:R-CNN、Fast R-CNN、Faster R-CNN

object detection 就是在给定的图片中精确找到物体所在位置,并标注出物体的类别。object detection 要解决的问题就是物体在哪里,是什么这整个流程的问题。然而,这个问题不是容易解决的,物体的尺寸变化范围很大,摆放物…

深度学习之边框回归(Bounding Box Regression)

从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到cvpr的yolo9000。这些paper中损失函数都包含了边框回归,除了rcnn详细介绍了,其他的paper都是一笔带过,或者直接引用rcnn就把损失函数写出来了。前三条网上解释比较…

2018 年,React 将独占web前端框架鳌头?

相比 Angular 和 Vue, React 是 2017 年的主要 JS 框架,尤其是 React Native 以前所未有的速度提升自己。 Stateofjs 2017前端框架调查结果 相比较 2016 年的调查结果 所以 ,1 年过去了,Vue.js 显然在前端框架中占据了领导地位&am…

python 第三方模块之 pandas 操作 excel

python 解析 excel 对比 包版本xls读xlsx读xls写xlsx写备注xlrd1.1.0(2017年8月22日)√√2.0 之后不支持xlsxxlwt1.3.0(2017年8月22日)√openpyxl2.6.2(2019年3月29日)√√XlsxWriter1.2.1(201…

YUV / RGB 格式及快速转换

YUV是指亮度参量和色度参量分开表示的像素格式,而这样分开的好处就是不但可以避免相互干扰,还可以降低色度的采样率而不会对图像质量影响太大。 YUV是一个比较笼统地说法,针对它的具体排列方式,可以分为很多种具体的格式。转载一篇…

深度学习之 SSD(Single Shot MultiBox Detector)

目标检测近年来已经取得了很重要的进展,主流的算法主要分为两个类型: (1)two-stage方法,如R-CNN系算法,其主要思路是先通过启发式方法(selective search)或者CNN网络(RP…

短时程突触可塑性(short-term synaptic plasticity)

介绍神经元的突触可塑性一般被认为是大脑学习与记忆的分子生物学机制,它是指突触传递效率增强或减弱的变化现象。若这种变化只持续数十毫秒到几分,便称之为短时程突触可塑性,其中效率增强与减弱分别叫做短时程增强(short-term enh…

windows平台下vlc编译

转自:http://jeremiah.blog.51cto.com/539865/114190Jeremiah刚刚工作几个月,参与的第一个项目是与视频监控有关,分配给我的任务就是用开源的vlc做一个自己的播放器。对于开源项目来说,搭建起编译环境是第一步也是最重要的一步。Jeremiah在历…