Vue利用Blob下载原生二进制数组文件


Posted in Javascript onSeptember 25, 2019

本文实例为大家分享了Vue利用Blob下载原生二进制数组文件的具体代码,供大家参考,具体内容如下

在服务端推送过来的二进制数组(JSON格式),在前端要处理成JS原生数组以后才能做成Blob,有两个地方要注意(详细注释),代码如下:

Vue.prototype.$downloadFile = (filename, data) => {
 if (!data) return;
 let arr8 = Uint8Array.from(data); //!!!注意1:应根据数据的类型选择适当的JS原生数组类型进行转换,也就是说服务端推送的byte型数组还是int型数组等。
 //定义文件内容,类型必须为Blob 否则createObjectURL会报错
 let blob = null;
 let type = 'application/octet-binary';
 if (typeof (window.Blob) == "function") {
  blob = new Blob([arr8], {//!!!注意2:数组两边必须加上[]
   type: type
  });
 } else {
  let BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
  let bb = new BlobBuilder();
  bb.append([arr8]);
  blob = bb.getBlob(type);
 }
 let URL = window.URL || window.webkitURL;
 let bloburl = URL.createObjectURL(blob);
 let anchor = document.createElement("a");
 if ('download' in anchor) {
  anchor.style.visibility = "hidden";
  anchor.href = bloburl;
  anchor.download = filename;
  document.body.appendChild(anchor);
  let evt = document.createEvent("MouseEvents");
  evt.initEvent("click", true, true);
  anchor.dispatchEvent(evt);
  document.body.removeChild(anchor);
 } else if (navigator.msSaveBlob) {
  navigator.msSaveBlob(blob, filename);
 } else {
  location.href = bloburl;
 } //移除链接释放资源
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
You might like
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
社区工作者先进事迹
2014/01/18 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
商业融资计划书
2014/04/29 职场文书
考试诚信承诺书
2014/05/23 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
红色影片观后感
2015/06/18 职场文书
详解python网络进程
2021/06/15 Python