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>