❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】或者来看我的个人网站

1.导入文件（使用elmentui的上传组件）

<el-uploaddrag:limit="1"action="https://jsonplaceholder.typicode.com/posts/"ref="upload"accept=".json":fileList="fileList":on-success="onSuccess":on-remove="onRemove"
><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><divclass="el-upload__tip"style="margin-top: 15px; width: 360px; text-align: center"slot="tip">上传json文件，且只能上传 1 个文件</div>
</el-upload>

onSuccess(res, file, fileList) {let arr = file.name.split(".");let docName = arr[0]; //导入的文件名称let reader = new FileReader();reader.readAsText(file.raw);reader.onload = (e) => {this.uploadData = JSON.parse(e.target.result); //e.target.result 文件的内容};
},onRemove(file) {this.fileList = [];},

2.导出文件

let docContent = "" //导出文件的内容
let docName = "test.txt" //导出的文件名称（带文件后缀名）
let content = new Blob([docContent]);
//生成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 = docName;
//必须点击否则不会下载
el.click();
//移除链接释放资源
urlObject.revokeObjectURL(url);

Thanks♪(･ω･)ﾉ，到此就结束了，有什么问题都可以问！
欢迎评论 / 私信我~

【vue开发基础】之Vue实现导入导出文件功能（基于饿了么UI）（二）相关推荐

Web前端开发技术：Vue开发基础（1）
一.实验目的: 掌握Vue开发环境的搭建.开发和调试工具的使用以及Vue项目的创建. 掌握Vue实例的创建及数据的绑定.Vue的事件监听操作.Vue组件的注册及组件之间的数据传递的方法以及Vue生命周 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Web前端开发技术:Vue开发基础（2）
一.实验目的: 掌握Vue提供的全局API. 掌握Vue实例对象中的常用属性. 二.实验要求: 了解Vue的常用全局API和实例属性及其使用编写程序完成以下实验内容并上交实验报告三.实验内容: ( ...
小程序用vue开发可以吗,vue直接开发小程序
一个完全的小白想学微信小程序开发,请问要学谷歌人工智能写作项目:小发猫编写微信小程序所需要的基础前端一般就是vue+element,然后起码的html5,css3,javascript等基础知识 ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
vue的基础知识-vue基础入门
vue的使用分享 1. Vue简介 2.Vue常用指令 3. V-router路由系统 4. Vue生命周期 1. Vue简介工欲善其事,必先利其器 1.1 Vue是什么? Vue (读音 /vju ...
Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程.配置第三方依赖.编译vue工程. 特别注意:Vue脚手架是用来方便开发的, ...
【vue开发基础】之使用阿里巴巴矢量图标库
❤ 写在前面如果觉得对你有帮助的话,点个小❤❤ 吧,你的支持是对我最大的鼓励~ 第一步准备工作前往阿里巴巴矢量图边库,选择并下载你需要的图标 (1)加入购物车 (2)下载代码 (3)解压并打开文 ...
[Vue.js] 基础 -- 安装Vue
安装 Vue 版本说明 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器直接用 &l ...

【vue开发基础】之Vue实现导入导出文件功能（基于饿了么UI）（二）

❤ 写在前面

1.导入文件（使用elmentui的上传组件）

2.导出文件

【vue开发基础】之Vue实现导入导出文件功能（基于饿了么UI）（二）相关推荐

最新文章

热门文章