项目场景：

项目场景：VUE工程，做了一个代码自动生成可以导出zip的功能。

问题描述

导出的zip文件打开提示“不可预料的压缩文件末端”，文件打不开。

 export function downLoadZip(str, filename) {var url = baseUrl + straxios({method: 'get',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() }}).then(res => {resolveBlob(res, mimeMap.zip)})}

原因分析：

分析是返回的数据流有丢失，所以在上面的代码段将返回的res的结果给打印出来。

发现返回的data是一串乱码，并不是blob格式的文件流。
通过这个情况，在网上搜了半天，才发现是Mockjs污染了responseType,默认会将responseType变为’’
那么第一种解决办法已经有了，就是修改Mockjs，文件路径是node_modules>mockjs>dist>mock.js

     // 原生 XHRif (!this.match) {this.custom.xhr.responseType = this.responseType //新加的解决该问题的代码this.custom.xhr.send(data)return}

那么这样改后，重新编译，测试，发现问题解决，返回值如下图。
但是这样只适合个人开发，实际上协同开发，或者用Jenkins自动部署时，会从npm下载Mockjs的源码，还是会有问题，那么怎么在不改Mockjs源码的情况下，解决该问题呢？

解决方案：

那么唯一的解决办法就是重写mockjs相关的部分，具体代码参考下面的

// 修复 mockjs 相关 bug
Mock.XHR.prototype.send = (() => {const _send = Mock.XHR.prototype.sendreturn function() {if (!this.match) {this.custom.xhr.responseType = this.responseType || ''this.custom.xhr.timeout = this.timeout || 0this.custom.xhr.withCredentials = this.withCredentials || falsethis.custom.xhr.onabort = this.onabort || nullthis.custom.xhr.onerror = this.onerror || nullthis.custom.xhr.onload = this.onload || nullthis.custom.xhr.onloadend = this.onloadend || nullthis.custom.xhr.onloadstart = this.onloadstart || nullthis.custom.xhr.onprogress = this.onprogress || nullthis.custom.xhr.onreadystatechange = this.onreadystatechange || nullthis.custom.xhr.ontimeout = this.ontimeout || null}return _send.apply(this, arguments)}
})()

具体代码查看 mock文件完整代码

VUE 下载文件流文件无法打开，缺失数据相关推荐

vue下载二进制流文件转为Excel文件
let blob = new Blob([data], { type: 'application/octet-stream' });// 转化为blob对象 let filename = file ...
js vue 下载excel(.xls)文件
@[TOC](js vue 下载excel(.xls)文件) 先看下载下来的excel文件 1.首先,后端给到的是一个文件在服务器中的存储地址 D:\MaxSecFile\Export\Alarm_2 ...
vue下载表单文件流功能实现
1.封装下载接口,在api文件新建exportinfo.js文件,在utils文件新建exportinfo.js文件. 2.api文件处理接口文件,代码如下: import request from ...
react前端下载后端返回文件流(文件流下载excel、csv)
以前用vue框架的时候,写过不少下载上传的东西,当然包括后端返回文件流供前端下载,现在用react,牵扯到这个功能,又提起来说,有两种下载类型,一种是Excel,一种是Csv. 首先后端返回这种: 或 ...
vue下载excel模板文件，excel读取
一.下载excel模板文件 <template><a-button type="primary" @click="downloadExcel" ...
文件和文件流——文件转码失败conversion failed: input document is null after loading
今天文件转码碰到个文件: 文件转码的时候抛出异常(conversion failed: input document is null after loading), 从服务器当下文件查看,发现文件大小 ...
uniapp 下载文件/二进制流数据文件，保存文件，打开文件。以及H5下载二进制流文件。
前提注意点 downloadFile 发送的是GET请求. 如果url接口返回的是二进制流数据.则要求后端content-type 里面填写具体的返回文件类型.否则下在的文件会没有后缀名.比如exce ...
前端下载二进制流文件
更多文章平时在前端下载文件有两种方式,一种是后台提供一个 URL,然后用 window.open(URL) 下载,另一种就是后台直接返回文件的二进制内容,然后前端转化一下再下载. 由于第一种方式比较 ...
ajax获得excel文件流在前端打开_主流前端技术讲解，面试必考！
Vue.js是Web前端的一个框架,用来快速开发单页面应用.当Vue.js开发变成主流的时候,许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发. 但是当我们详细了解Vue.js以后,会发 ...
ajax获得excel文件流在前端打开_Javascript前端开发：jsonp的原理你真的懂吗？
从事前端开发的小伙伴肯定都用过jquery的ajax请求,但如果需要跨域请求,就需要用到jsonp,因为默认的ajax跨域请求会被浏览器拦截,拦截原因是因为支持Javascript的浏览器都会使用同源 ...

VUE 下载文件流文件无法打开，缺失数据

项目场景：

问题描述

原因分析：

解决方案：

VUE 下载文件流文件无法打开，缺失数据相关推荐

最新文章

热门文章

VUE 下载文件流 文件无法打开，缺失数据

项目场景：

问题描述

原因分析：

解决方案：

VUE 下载文件流 文件无法打开，缺失数据相关推荐

最新文章

热门文章

VUE 下载文件流文件无法打开，缺失数据

VUE 下载文件流文件无法打开，缺失数据相关推荐