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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
使用console进行性能测试
Apr 27 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
python中List的sort方法指南
2014/09/01 Python
numpy中索引和切片详解
2017/12/15 Python
用python做游戏的细节详解
2019/06/25 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python unichr函数知识点总结
2020/12/16 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
化工机械应届生求职信
2013/11/04 职场文书
求职简历中自我评价
2014/01/28 职场文书
党在我心中演讲稿
2014/09/02 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
离婚纠纷代理词
2015/05/23 职场文书
军训新闻稿范文
2015/07/17 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
小学数学教学反思范文
2016/02/16 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers