Vue中保存数据到磁盘文件的方法


Posted in Javascript onSeptember 06, 2018

网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定。

以app.vue为例

<mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button>

下面在方法中定义函数

<code class="language-html">methods:{ 
  ExportData(){ 
  //定义文件内容,类型必须为Blob 否则createObjectURL会报错 
  let content = new Blob([JSON.stringify(this.todos)]) 
 
  //生成url对象 
  let urlObject = window.URL || window.webkitURL || window  
  let url = urlObject.createObjectURL(content)  
  //生成<a></a>DOM元素 
  let el = document.createElement('a') 
  //链接赋值 
  el.href = url 
  el.download ="todo文件导出.txt" 
  //必须点击否则不会下载 
  el.click()  
  //移除链接释放资源  
  urlObject.revokeObjectURL(url) 
  } 
}</code>

需要注意的几点

1、在chrome下是不能使用new activexobject进行下载,这种方式只适用于ie

2、createObjectURL的参数必须是blob类型,不然会提示url.createObjectURL出错

搞定了导出,还需要可以导入数据才行,下次在弄

以上这篇Vue中保存数据到磁盘文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
JS实现点击掉落特效
Jan 29 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 #Javascript
vue生成文件本地打开查看效果的实例
Sep 06 #Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 #Javascript
在vue中读取本地Json文件的方法
Sep 06 #Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 #Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
第六节 访问属性和方法 [6]
2006/10/09 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python实现AES加密和解密
2019/03/27 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
学习Python需要哪些工具
2020/09/04 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
创业大赛策划书
2014/03/01 职场文书
一年级小学生评语
2014/04/22 职场文书
公共场所禁烟标语
2014/06/25 职场文书
社会实践的活动方案
2014/08/22 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
DSP接收机前端设想
2022/04/05 无线电