vue调用后台接口导出功能代码

在Vue.js中，调用后台接口并实现数据导出功能通常涉及到两个步骤：发送HTTP请求获取数据以及将数据导出为文件（比如CSV或Excel）。这里是一个简单的示例，假设我们使用axios库来发送GET请求，并且使用js-file-excel库来生成Excel文件：

<!-- Vue组件模板 -->
<button @click="exportData">导出数据</button>

<script>
import axios from 'axios';
import { createExcel } from 'js-file-excel';

export default {
  data() {
    return {
      // 假设这是你要导出的数据
      dataList: [],
    };
  },
  methods: {
    async exportData() {
      try {
        const response = await axios.get('your-api-url'); // 替换为实际的API地址

        // 检查数据是否成功获取
        if (response.data) {
          this.dataList = response.data; // 将数据赋值给dataList

          // 创建Excel文件
          const excelData = {
            sheetNames: ['Sheet1'], // 单元格标签
            sheets: {
              Sheet1: this.dataList, // 数据映射到单元格
            },
          };

          // 导出Excel文件
          createExcel(excelData).then((blob) => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'data.xlsx'; // 文件名
            a.click();
          });
        } else {
          alert('无法获取数据，请检查API');
        }
      } catch (error) {
        console.error('Error:', error);
      }
    },
  },
};
</script>

在这个例子中，用户点击"导出数据"按钮时，会触发`exportData`方法。首先发送请求获取数据，如果成功则处理响应并将数据保存到`dataList`，然后创建一个包含这些数据的Excel文件并通过下载链接将其导出。