做网站风险分析,四川专业网站建设费用,全网营销心得体会,淘宝内部领优惠券的网站怎么建设目录
1. axios 请求二进制流文件导出文件
1.1 后台返回的二进制流#xff1a;
1.2 使用#xff1a;
1.3 需要注意以下几点#xff1a;
2. 关于 arraybuffer 和 blob
2.1 ArrayBuffer 和 blob
2.2 区别
2.3 相互转换
3. 主要参考#xff1a; 1. axios 请求二进制…目录
1. axios 请求二进制流文件导出文件
1.1 后台返回的二进制流
1.2 使用
1.3 需要注意以下几点
2. 关于 arraybuffer 和 blob
2.1 ArrayBuffer 和 blob
2.2 区别
2.3 相互转换
3. 主要参考 1. axios 请求二进制流文件导出文件 下载的时候需要传请求头时普通的 window.location.hrefurl、window.open(url) 就不适用了。通过 axios 设置服务器响应的数据类型可以下载后台返回的二进制流文件。
responseType 表示服务器响应的数据类型可以是 arraybuffer, blob, document, json, text, stream
1.1 后台返回的二进制流 因为我这里用到的比较多所在封装在的公共函数中
const exportExcel function(url, params{}){axios.get(url,{ params:params, responseType: arraybuffer}).then(function(res){console.log(返回的二进制流文件, res )if(!res) return;//fileName:下载的文件名var fileName decodeURIComponent(res.headers[content-disposition].split()[1])let blob new Blob([res.data], {type: application/vnd.ms-excel;charsetutf-8});// 针对ie浏览器if (window.navigator window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveOrOpenBlob(blob, fileName);} else {//非ie浏览器var downloadElement document.createElement(a);var href window.URL.createObjectURL(blob); //常见下载的链接downloadElement.href href;downloadElement.download fileName; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放blob对象}}).catch(function(error){console.log(error);})
}export default {exportExcel} 1.2 使用
el-button typeprimary plain sizemini iconel-icon-download clickexportFile导出/el-buttonmethods:{//导出exportFile(){exportExcel(/api/warehouse/exportDetailsWarehouse, this.searchForm); //本地测试}
}
1.3 需要注意以下几点
res 的返回值很多人封装 axios 时直接返回了res.data上面代码中的 res.data 改为 res 就好了。 let blob new Blob([res], {type: application/vnd.ms-excel;charsetutf-8}); 但是如果后台在接口里面返回了文件名是获取不到的因为只能获取到 res.data 的内容。本地调试时做好跨域代理否则会报跨域问题。post 请求可能会失败。以上是我在做这个需求时碰到的问题有的人可能在项目中安装了 mockjs导致下载失败参考
vue axios(下载文件流)设置返回值类型responseType:blob无效的问题_kk无敌怕的博客-CSDN博客_axios设置responsetype 2. 关于 arraybuffer 和 blob 在参考博客时发现对于 responseType 有的是填“blob”有的是 “arraybuffer”因此去了解了一下这两个的区别。
2.1 ArrayBuffer 和 blob
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。 它是一个字节数组通常在其他语言中称为“byte array”。 你不能直接操作 ArrayBuffer 的内容而是要通过类型数组对象或 DataView 对象来操作它们会将缓冲区中的数据表示为特定的格式并通过这些格式来读写缓冲区的内容。 Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取也可以转换成 ReadableStream 来用于数据操作。 Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 要从其他非blob对象和数据构造一个 Blob使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob使用 slice() 方法。
2.2 区别
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。 Blob (binary large object)他表示一个不可变、原始数据的类文件对象 blob类型只有slice方法用于返回一个新的 Blob对象包含了源 Blob对象中指定范围内的数据。 对比发现ArrayBuffer的数据是可以按照字节去操作的而Blob的只能作为一个整的对象去处理。 所以说ArrayBuffer相比Blob更接近真实的二进制更底层。 ArrayBuffer 和 Blob一样都是二进制数据的容器而ArrayBuffer相比更为底层他可以去操作去修改这些二进制值这两者之间也是可以互转的。
2.3 相互转换
// arraybuffer转blob很方便作为参数传入就行了。
var buffer new ArrayBuffer(16)
var blob new Blob([buffer])//此处需要借助fileReader对象:
var blob new Blob([1,2,3,4,5])
var reader new FileReader()
reader.onload function() {console.log(this.result)
}
reader.readAsArrayBuffer(blob)
// 控制台输出的则是ArrayBuffer的数据了 我这里用的 arraybuffer改为 “blob” 也能正常下载。 responseType: arraybuffer 请求到的数据responseTyle:blob 请求到的数据3. 主要参考
前端通过axios请求下载excel文件_qq_31645371的博客-CSDN博客_axios post下载excel当后台接口有token校验的时候通过window.location.hrefurl不能携带token参数因而此方法不能正常下载excel文件但是通过axios请求可以实现请求头中携带token参数具体代码如下...https://blog.csdn.net/qq_31645371/article/details/91984217后端返回二进制文件流前端处理下载 - eightabs - 博客园处理逻辑获取返回文件流通过 Blob 对象构造文件后下载。 function download(data, filename, typeapplication/vnd.ms-excehttps://www.cnblogs.com/eightabs/p/14079581.html
axios 请求接口获取文件流数据导出数据到excel,解决乱码 - 久而久之灬 - 博客园axios.get(URL,{ params:{ data1:data1, data2:data2 }, headers: { Content-Type:https://www.cnblogs.com/yaomin/p/10821065.html
window.URL.createObjectURL Blob URL在IE中兼容问题_Yang Yong 的博客-CSDN博客问题描述window.URL.createObjectURL()可以直接生成blob:开头的链接该链接产生于浏览器端不会占用服务器资源。window.URL.createObjectURL()在IE10, IE11以及Microsoft Edge中生成的blob:链接你不能把它加到一个lt;agt;节点上也不能直接在浏览器地址栏打开访问并且得到“Error: 拒绝访问。...https://blog.csdn.net/u014628388/article/details/81738704 前端 ArrayBuffer 与 Blob 互转_前端挖掘机-CSDN博客_blob转arraybuffer首先说一点基础知识responseType 可选的参数有text、arraybuffer、blob 或 document对应的返回数据为 DOMString、ArrayBuffer、Blob、Document默认参数为text。前端请求二进制数据的时候需要设置数据响应格式xhr.responseType arraybuffer写法如下...https://blog.csdn.net/weixin_41849462/article/details/103409341 前端实现调用后台接口下载arraybuffer和blob - 简书下载 封装调用接口方法 下载函数 注window.URL.createObjectURL URL.createObjectURL() 静态方法会创建一个 DOMString...https://www.jianshu.com/p/de8b3b76f131
