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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JS与框架页的操作代码
Jan 17 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python实现线程池代码分享
2015/06/21 Python
Python实现大文件排序的方法
2015/07/10 Python
Python正则表达式使用范例分享
2016/12/04 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python面向对象进阶学习
2019/05/21 Python
Python异常处理例题整理
2019/07/07 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python高级特性简介
2020/08/13 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
售后服务承诺书范文
2014/03/26 职场文书
明信片寄语大全
2014/04/08 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
软件项目开发计划书
2014/05/01 职场文书
组工干部对照检查材料
2014/08/25 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
校园安全广播稿范文
2014/09/25 职场文书
个人简历求职信范文
2015/03/20 职场文书
Python 多线程处理任务实例
2021/11/07 Python