纯前端导入导出json文件

<template>
  <div>
    <el-upload
      action
      :on-change="change"
      :auto-upload="false"
      accept=".json"
	  :show-file-list="false"
	   style="margin-right: 5px"
    >
      <el-button size="small" type="primary">导入json文件</el-button>
    </el-upload>
	<el-button @click="download">导出json文件</el-button>
  </div>
</template>
<script lang="ts" setup>
	import {  UploadFile, UploadFiles } from "element-plus";

    function change(file: UploadFile, fileList: UploadFiles) {
	  if (!file.raw) return;
      var reader = new FileReader() //新建一个FileReader
      reader.readAsText(file.raw, 'UTF-8') //读取文件
      reader.onload = async function(evt) { //读取文件完毕执行此函数
        let dataJson = JSON.parse(evt.target.result)
        console.log(dataJson)
      }
    }
	
	function download() {
	  let data = JSON.stringify({"a":"123"});
	  let blob = new Blob([data], { type: "text/plain" });
	  let url = URL.createObjectURL(blob);
	  let a = document.createElement("a");
	  a.href = url;
	  a.download = "design.json";
	  a.click();
	}
</script>