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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
php生成固定长度纯数字编码的方法
2015/07/09 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
教育技术职业规划范文
2014/03/04 职场文书
青春演讲稿范文
2014/05/08 职场文书
施工安全生产承诺书
2014/05/23 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
单位实习鉴定评语
2015/01/04 职场文书
中秋节祝酒词
2015/08/12 职场文书
爱国主义主题班会
2015/08/14 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python ConfigParser库的使用及遇到的坑
2022/02/12 Python