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,一经查实,立即删除!

相关文章

Python 第三方模块之 psutil - 获取系统运行的进程和系统利用率信息

一、psutil模块: 官方网址:http://pythonhosted.org/psutil/ 1.psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率(包括CPU、内存、磁盘、网络等)信息。它主要用来做系统监控,…

石头机器人红灯快闪_机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代...

原标题:机器人集体“快闪”活动爆红网络 “我是AI”与您相约智能新时代3月10日下午,天津科学技术馆内,悠扬美妙的歌声《我和我的祖国》突然响起,随后50个身形矫健的阿尔法机器人伴随着歌声翩翩起舞,动作整齐、科技感十…

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

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

无线网络实体图生成工具airgraph-ng

无线网络实体图生成工具airgraph-ngairgraph-ng是aircrack-ng套件提供的一个图表生成工具。该工具可以根据airodump工具生成的CSV文件绘制PNG格式的图。绘制的图有两种类型,分别为AP-客户端关联图和通用探测图。通过AP-客户端关联图,可以更为直观的了解无…

高等代数期末考试题库及答案_数学类高等代数期末考试试题A卷(含答案)

数学类高等代数期末考试试题A卷(含答案)课程编号MTH17063 北京理工大学2010-2011学年第一学期2009级数学类高等代数期末考试试题A卷班级 学号 姓名 成绩 一、(25分)设表示域上的所有阶矩阵构成的上的线性空间。取定,对于任意的,定义。(1)证明为上的一个线…

cocos2d-lua3.7组件篇(三)-http通信demo

客户端使用lua、服务端使用QT做为服务器。 步骤: 客户端 -----------Post 用户名和密码 服务端接受Post请求,读取数据,返回response一、客户端代码 loadingImg require"app.scenes.LoadingLayer"local LoginScene class(&qu…

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

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

Python 第三方模块之 selenium - 模拟操作 Chrome 浏览器

1、安装selenium 1.1、Python 安装 selenium 模块 pip install selenium1.2、下载驱动 选择和自己chrom版本相对应的驱动到本地,下载地址 http://npm.taobao.org/mirrors/chromedriver/2、Python 操作 from selenium import webdriver import time import json…

jupyter notebook代码导出_Jupyter Notebook导出包含中文的pdf_亲测有效

Jupyter Notebook是很好的数据科学创作环境,是非常方便的Python代码编辑器。jupyter提供导出的格式有.py、.html、.md、.pdf等。目前用其导出包含中文的pdf会遇到很多坑,网上也有一些解决方案,大致分为两种方式,一是安装 pandoc并…

前端之使用 POST 提交数据并跳转

GET 方式 window.location.href是我们常用来在js中实现页面跳转的方法,这是使用get方式发送请求,示例如下 window.location.href url;优点是简单易用,缺点是如果有参数的话,参数会暴露在url地址中,这降低了系统的安…

cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互

使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性。但操作系统和前端之间的交互却是比较复杂的。具体来说就是脚本语言和编译语言的交互。在IE内核中html和css虽然不兼容,但是IE编程接口是完全一样的,这得益于微软的…

多线程编程指南 part 2

多线程编程指南Sun Microsystems, Inc.4150 Network CircleSanta Clara, CA95054U.S.A.文件号码819–7051–102006 年10 月版权所有2005 Sun Microsystems, Inc. 4150 Network Circle, Santa Clara, CA95054 U.S.A. 保留所有权利。本文档及其相关产品的使用、复制、分发和反编译…

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…

kafka 日志相关配置

日志目录 ${kafka.logs.dir}/server.log :服务器日志${kafka.logs.dir}/state-change.log:状态变化日志${kafka.logs.dir}/kafka-request.log:请求处理日志${kafka.logs.dir}/log-cleaner.log:日志清理${kafka.logs.dir}/control…

linux mc服务器 mod_如何在linux搭建MC服务器

摘要:前言Q:为什么要用linux搭建MC服务器?A:因为linux系统占用率低,跑服务器效果非常好Q:看不懂linux ssh,后期自己无力运维怎么办A:没关系,这个教程是通过安装BT...前言…

flask-SQLAlchemy 使用 session.commit() 处理异常回滚

最为原始的try/except办法,多次插入数据就要写多次,很麻烦,使用python原生的contextlib.contextmanager简化代码! try:user_db User(emailself.email, nicknameself.nickname, passwordself.password)db.session.add(user_db)#所…

小米机器人清理主刷和轴承_扫地机主刷怎样更换

原标题:扫地机主刷怎样更换随着电动扫地机逐渐取代手动清洁,电动扫地机的工作量不断增加,从而导致主刷磨损更加严重,并增加了主刷更换的次数。因此,伟顿在这里告诉大家扫地机主刷怎样更换:1 .首先&#xff…

多线程编程指南

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

路由器和猫的区别

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