<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>
纯前端导入导出json文件
于 2024-05-15 09:55:43 首次发布