java导出excel 配合vue

原创

mob64ca12e7f20c 2024-05-12 05:02:14 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e7f20c的原创作品，请联系作者获取转载授权，否则将追究法律责任

导出Excel 配合 Vue

整体流程

journey
    title 整体流程
    section 准备工作
        开发者 ->> 小白: 创建一个基础的Vue项目
        开发者 ->> 小白: 安装vue-cli工具
        开发者 ->> 小白: 创建一个Excel导出的Java后端项目
    section 实现步骤
        开发者 ->> 小白: 前端页面中添加一个导出按钮
        开发者 ->> 小白: 点击按钮时，前端调用后端Java接口生成Excel文件并下载

具体步骤

准备工作

创建一个基础的Vue项目

代码示例：
```bash
vue create excel-demo


2. 安装vue-cli工具

```markdown
代码示例：
```bash
npm install -g @vue/cli


3. 创建一个Excel导出的Java后端项目

```markdown
代码示例：
```bash
spring init -n excel-demo -d=web,devtools excel-demo


### 实现步骤

1. 前端页面中添加一个导出按钮

在Vue项目的组件中添加一个按钮，点击按钮时触发下载Excel文件的逻辑。

```javascript
// 在Vue组件的template中添加按钮
<button @click="exportExcel">导出Excel</button>

点击按钮时，前端调用后端Java接口生成Excel文件并下载

在Vue组件的methods中编写导出Excel的逻辑，使用axios发送请求调用后端接口。

// 定义导出Excel的方法
exportExcel() {
    axios.get('http://localhost:8080/exportExcel', {
        responseType: 'blob'  // 响应类型设置为blob，以便接收二进制数据
    })
    .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'excel.xlsx');
        document.body.appendChild(link);
        link.click();
    })
    .catch(error => {
        console.error(error);
    });
}