vue将数据保存到本地磁盘文件（导入导出）

1) 效果图

2）老规矩上码

--- start
---- 【html】
<template>
    <div id="hidXml">
        <p>xml文件</p>
        <el-button type="primary" icon="el-icon-upload" @click="choiseFile">导入</el-button>
        <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
        <el-button type="primary" @click="ExportData">导出<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
</template>

---- 【 js 】

choiseFile(){
    this.$refs.refFile.dispatchEvent(new MouseEvent('click'))
},
// 读取文件
fileLoad(){
    const selectedFile = this.$refs.refFile.files[0];
    // var name = selectedFile.name; //选中文件的文件名
    // var size = selectedFile.size; //选中文件的大小
    // console.log("文件名:" + name + "大小:" + size);
    // console.log(selectedFile)
    var reader = new FileReader();
    reader.readAsText(selectedFile);
    reader.onload = function() {
        console.log(JSON.parse(this.result));
    }
},
// 导出
ExportData(){
ExportData(data){
    //定义文件内容，类型必须为Blob 否则createObjectURL会报错
    let content = new Blob([JSON.stringify(data)])

    //生成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文件导出.text"
    //必须点击否则不会下载
    el.click()
    //移除链接释放资源
    urlObject.revokeObjectURL(url)
},

--- end