vue3 ts 实现一个下载数据功能（基本功能组件）

<script lang="ts" setup>

import { ElMessage } from 'element-plus'

import { useLinenetStore } from '../pages/index/uses/linenet'

const linenetStore = useLinenetStore()

// 创建一个变量用来存储数据

interface IvehicleData {

  data: any

  timestamp: number

}

const vehicleDatas: Ref<IvehicleData[]> = ref([])

let sgin = false

// 添加数据，自动附带时间戳

function addData(newData: any) {

  const newItem: IvehicleData = {

    data: newData,

    timestamp: Date.now(),

  }

  vehicleDatas.value.push(newItem)

}

// 清理过期数据

function cleanExpiredData() {

  vehicleDatas.value = []

}

// 导出数据到本地

function exportData() {

  const dataToExport = JSON.stringify(vehicleDatas.value.map((item: any) => item.data), null, 2)

  const blob = new Blob([dataToExport], { type: 'text/json' })

  const url = URL.createObjectURL(blob)

  const a = document.createElement('a')

  a.href = url

  a.download = 'vehicleData10min.json'

  document.body.appendChild(a)

  a.click()

  document.body.removeChild(a)

  URL.revokeObjectURL(url)

}

function startClick() {

  if (sgin)

    return

  ElMessage({

    message: '导出开始!',

    type: 'success',

  })

  sgin = true

  setTimeout(() => {

    sgin = false

    exportData()

    cleanExpiredData()

    ElMessage({

      message: '导出完成!',

      type: 'success',

    })

  }, 60000) // 10min = 600000s 1min=60000s

}

watch(() => linenetStore.unityVehicles, (newVal) => {

  if (!sgin)

    return

  // 添加数据

  addData(newVal)

})

</script>

<template>

  <div

    class="text-center"

  >

    <button style="padding: 4px; cursor: pointer; font-size: 14px;" @click="startClick">

      导出数据

    </button>

  </div>

</template>