前端Vue怎么添加导入导出按键

在Vue中添加导入导出功能，你可以使用`axios`或其他HTTP库来处理文件上传和下载。这里是一个基础的例子：

首先，在HTML模板中，创建输入元素和两个按钮：

<div id="app">
  <input type="file" @change="uploadFile($event)" accept=".csv, .xlsx" />
  <button @click="downloadData">导出</button>
  <!-- ...其他内容... -->
</div>

在`methods`中定义`uploadFile`和`downloadData`方法：

export default {
  methods: {
    uploadFile(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.upload(file);
    },
    
    async upload(file) {
      try {
        const formData = new FormData();
        formData.append('file', file);
        
        await axios.post('/api/upload', formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        });
        // 提交成功后，可能需要从服务器获取新的状态或数据
        this.importedData = '导入成功'; // 只是一个示例，实际取决于服务器响应
      } catch (error) {
        console.error('上传失败', error);
      }
    },
    
    downloadData() {
      // 你需要在这里从服务器获取数据
      const downloadedData = this.exportedData; // 假设你已经有了导出的数据
      this.download(downloadedData, 'data.csv'); // 下载文件
    },
    
    download(data, filename) {
      const blob = new Blob([data], {type: 'text/csv'});
      // 使用URL.createObjectURL生成临时链接
      const url = URL.createObjectURL(blob);
      // 创建a标签触发下载
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      // 清理临时链接
      setTimeout(() => URL.revokeObjectURL(url), 0);
    }
  }
}

以上代码展示了如何通过`axios`发送文件上传请求（`uploadFile`）和发起下载请求（`downloadData`）。注意，这只是一个简化的示例，实际情况中你可能需要根据服务器API的实际需求调整代码。