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 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
pyside写ui界面入门示例
2014/01/22 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
深入了解python列表(LIST)
2020/06/08 Python
最新自我评价范文
2013/11/16 职场文书
市场营销战略计划书
2014/05/06 职场文书
安全隐患整改报告
2014/11/06 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers