Vue 将api 获取的 json 数据保存到本地

<script setup lang="ts">//引用对象 + 扩展属性
const props = defineProps({detailData: {type: Object,default: () => ({}), // 默认空对象，避免 undefined},
});const pageData = ref<any>(null);/** 查询 */
function handleQuery() {loading.value = true;const queryParams = { WearId: props.detailData?.WearId };HealthArchiveAPI.getHealthArchive(queryParams).then((data) => {pageData.value = data.Data || null;}).catch((error) => {console.error("获取数据失败:", error);pageData.value = null;}).finally(() => {loading.value = false;});
}const downloadJson = () => {if (!pageData.value) return;const jsonString = JSON.stringify(pageData.value, null, 2);const blob = new Blob([jsonString], { type: "application/json" });const url = URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = `${props.detailData?.name}.json`;document.body.appendChild(a);a.click();// 清理setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 100);// 显示通知ElMessage.success("导出成功");
};//计算数据量大小
const calculateFileSize = () => {if (!pageData.value) return 0;const jsonString = JSON.stringify(pageData.value);return (new Blob([jsonString]).size / 1024).toFixed(2);
};</script>