Vue 통계 차트를 위한 데이터 가져오기 및 내보내기 기능 구현

npm install vue-upload-component --save

<template>
  <div>
    <file-upload @change="handleFileUpload" accept=".csv">
      <!-- 自定义文件上传按钮 -->
      <button>选择文件</button>
    </file-upload>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload,
  },
  methods: {
    handleFileUpload(file) {
      // 处理文件上传逻辑
    },
  },
};
</script>

<template>
  ...
</template>

<script>
...
  methods: {
    handleFileUpload(file) {
      let reader = new FileReader();

      reader.onload = (e) => {
        // 读取文件内容
        let result = e.target.result;
        // 处理数据
        let data = this.parseCSV(result);
        // 后续逻辑，比如更新图表数据等
      };

      reader.readAsText(file);
    },
    parseCSV(content) {
      // 解析csv文件
      let rows = content.split('
');
      let data = rows.map((row) => row.split(','));
      return data;
    },
  },
...
};
</script>

npm install file-saver --save

<template>
  <div>
    <!-- 统计图表组件代码 -->
    ...
    <button @click="exportData">导出数据</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      chartData: [], // 统计图表数据
    };
  },
  methods: {
    exportData() {
      // 将数据转换为csv格式
      let csvContent = this.convertToCSV(this.chartData);
      // 创建Blob对象
      let blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
      // 使用file-saver保存文件
      saveAs(blob, 'data.csv');
    },
    convertToCSV(data) {
      // 转换为csv格式
      let csvContent = '';
      data.forEach((row) => {
        let rowStr = row.join(',');
        csvContent += rowStr + '
';
      });
      return csvContent;
    },
  },
};
</script>