手摸手教你前端和后端是如何实现导出 Excel 的？

已于 2024-08-01 09:17:17 修改
阅读量1.8k 收藏
点赞数 35
分类专栏： EasyExcel Java 文章标签： 前端 excel java
于 2024-07-30 09:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyendjsj/article/details/140780599
版权

前言

大家好呀，我是雪荷。在上篇文章（EasyExcel 初使用—— Java 实现多种写入 Excel 功能-CSDN博客）中给大家介绍了 Java 是如何写入 Excel 的，那么这篇算是对上篇文章的拓展，主要介绍前端和后端分别是如何导出数据至 Excel 的。

前端导出 Excel

我就用之前比赛的项目给大家演示吧，其组件库为 Ant Design Vue，框架为 Vue3，使用的第三方库为 XLSX。整体的实现并不困难只需写两个函数即可，话不多说直接上代码。

安装命令

npm install XLSX

引入 XLSX

import * as XLSX from 'xlsx';

vue 的 template 部分

<template>
  <a-table
      id="table-data"
      style="margin-top: 30px;"
      :columns="columns"
      :dataSource="data"
      class="antv-table"
  >
  </a-table>
  <a-button type="primary" @click="exportTableData">导出表格数据</a-button>
  <a-button type="primary" @click="downloadExcel">Excel下载</a-button>
  <a-button type="primary" @click="exportData">导出数据</a-button>
​
</template>

ts 导出 Excel 代码

// 将 Table 组件的数据转为 Excel 数据
const transData = (columns: any, tableList: any) => {
  const obj = columns.reduce((acc, cur) => {
    if (!acc.titles && !acc.keys) {
      acc.titles = [];
      acc.keys = [];
    }
    acc.titles.push(cur.title);
    acc.keys.push(cur.dataIndex);
    return acc;
  }, {});
  const tableBody = tableList.map(item => {
    return obj.keys.map(key => item[key]);
  });
  return [obj.titles, ...tableBody];
};
​
// 将数据写入 Excel 文件
const exportTableData = () => {
  const tableData = transData(
      columns,
      data.value
  );
  // 将一组 JS 数据数组转换为工作表
  const ws = XLSX.utils.aoa_to_sheet(tableData);
  // 创建 workbook
  const wb = XLSX.utils.book_new();
  // 将 工作表 添加到 workbook
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 将 workbook 写入文件
  XLSX.writeFile(wb, '销售数据.xlsx');
};

ts 请求后端接口代码

watchEffect(async () => {
  const res: any = await myAxios.post('/sale/data/list',);
  if (res?.code === 0) {
    data.value = res.data.map((item: SaleData, index: number) => ({
      key: index,
      id: item.id,
      name: item.name,
      price: item.price,
      totalNum: item.totalNum,
      userId: item.userId,
      datetime: item.datetime,
    }));
  } else {
    message.error('数据获取失败');
  }
});

后端代码

Controller 层：

 @PostMapping("/data/list")
    public BaseResponse<List<SaleData>> listSaleData() {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L,"2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L,"2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L,"2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L,"2024-02-01 13:00:00"));
        return ResultUtils.success(list);
    }

SaleData：

@Data
@AllArgsConstructor
public class SaleData implements Serializable {
​
    @ExcelProperty("订单号")
    private Long id;
​
    @ExcelProperty("品种")
    private String name;
​
    @ExcelProperty("价格")
    private BigDecimal price;
​
    @ExcelProperty("数量")
    private Integer totalNum;
​
    @ExcelProperty("交易对象")
    private Long userId;
​
    @ExcelProperty("交易时间")
    private String datetime;
}

前端导出主要是通过 XLSX 这个库实现的，其根据 Ant Design 的 Table 组件的 columns 属性和后端返回的 List 构建成了一个 Excel 文件，最后利用 writeFile 方法导出 Excel 文件。

点击“导出表格数据”按钮，可以看到数据已导出至 Excel 中了。

image-20240729195452336

d0b3d3225e8f16c4acde85a471d64f6

优点：简单，便捷

缺点：

  1. 不灵活，不适合非固定表头和复杂的表头

  2. 前端导出不适合数据量大的场景，因为页面会卡死

后端导出 Excel

据我了解的后端实现导出 Excel 的功能主要有两种。一种是将 Excel 写入流中，前端拿到文件流再转为 blob 后进行下载，另一种是将 Excel 文件转为 base64 编码，前端将 base64 编码转为 blob 再下载。由此可见最终都是要转为 blob 的，拿到 blob 就好搞了。

后端将 Excel 写入流中

后端代码

Controller 层：

@PostMapping("/data/download")
    public void exportSaleDetails(HttpServletResponse response) throws UnsupportedEncodingException {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​
        // 设置响应头信息
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
​
        String fileName = "销售数据1.xlsx";
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
​
        // 写出Excel文件到响应
        try {
            EasyExcel.write(response.getOutputStream(), SaleData.class)
                    .sheet("合伙人业务订单")
                    .doWrite(list);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

ts 代码

const downloadExcel = () => {
  const response = myAxios.post('/sale/data/download', null, {
    responseType: 'blob',
  }).then((res) => { // 处理返回的文件流
    const content = res
    const blob = new Blob([content])
    console.log(content)
    const fileName = '销售数据.xlsx';
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  });
};

点击“Excel 下载”按钮导出数据。

219d096f29327fc8e8e9f4c17dabf0d

image-20240729200907785

优点：

  1. 传输效率高，网络负载小

  2. 内存占用，适合传输大文件

缺点：

  1. 会有跨域问题

后端返回 base 64 编码，前端再转为 blob

后端代码

 @PostMapping("/data/export")
    public BaseResponse<String> exportSaleData() throws UnsupportedEncodingException {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​
        // 生成 Excel 文件并转换为 Base64 编码
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        EasyExcel.write(outputStream, SaleData.class).sheet("Sheet1").doWrite(list);
        byte[] bytes = outputStream.toByteArray();
        String excelBase64 = Base64.getEncoder().encodeToString(bytes);
​
        // 返回 Base64 编码的 Excel 内容给前端
        return ResultUtils.success(excelBase64);
    }

ts 代码

const exportData = async () => {
  const response: any = await myAxios.post('/sale/data/export');
  if (response?.code === 0) {
    const excelBase64 = response.data; // 接收后端返回的 Base64 编码字符串
    console.log(excelBase64)
    const blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    const fileName = '销售数据.xlsx';
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  }
}
​
// 将 Base64 字符串转换为 Blob 对象
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  return new Blob(byteArrays, {type: contentType});
}

主要分为三个阶段，首先后端将文件写入流中再将流转为 base64 编码返回给前端，第二步前端拿到 base64 编码将其转为 blob，最后根据 blob 进行下载。

点击“导出数据”按钮导出数据。

image-20240729201558898

e3d3341edc8985fd103c87c9dd764cf

优点：

  1. 传输数据是 base64 字符串便于调试

  2. 跨域问题少

缺点：

  1. 内存占用大，适合传输小文件

  2. 传输效率低

全部代码

前端

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <a-table
      id="table-data"
      style="margin-top: 30px;"
      :columns="columns"
      :dataSource="data"
      class="antv-table"
  >
  </a-table>
​
  <a-button type="primary" @click="exportTableData">导出表格数据</a-button>
  <a-button type="primary" @click="downloadExcel">Excel下载</a-button>
  <a-button type="primary" @click="exportData">导出数据</a-button>
​
</template>
<script setup lang="ts">
import {ref, watchEffect} from "vue";
import myAxios from "@/plugins/myAxios";
import {message, TableColumnsType} from "ant-design-vue";
import * as XLSX from 'xlsx';
​
const columns: TableColumnsType = [
  {title: '订单号', width: 100, dataIndex: 'id', key: 'id', fixed: 'left'},
  {title: '品种', dataIndex: 'name', key: 'name', width: 150},
  {title: '价格', dataIndex: 'price', key: 'price', width: 150},
  {title: '数量', dataIndex: 'totalNum', key: 'totalNum', width: 150},
  {title: '交易对象', dataIndex: 'userId', key: 'userId', width: 150},
  {title: '交易时间', dataIndex: 'datetime', key: 'datetime', width: 150},
];
​
interface SaleData {
  id: number;
  name: string;
  price: number;
  totalNum: number;
  userId: number;
  datetime: string;
}
​
interface DataItem {
  key: number;
  id: number;
  name: string;
  price: number;
  totalNum: number;
  userId: number;
  datetime: string;
}
​
const data = ref<DataItem[]>([]);
​
watchEffect(async () => {
  const res: any = await myAxios.post('/sale/data/list',);
  if (res?.code === 0) {
    data.value = res.data.map((item: SaleData, index: number) => ({
      key: index,
      id: item.id,
      name: item.name,
      price: item.price,
      totalNum: item.totalNum,
      userId: item.userId,
      datetime: item.datetime,
    }));
  } else {
    message.error('数据获取失败');
  }
});
​
const transData = (columns: any, tableList: any) => {
  const obj = columns.reduce((acc, cur) => {
    if (!acc.titles && !acc.keys) {
      acc.titles = [];
      acc.keys = [];
    }
    acc.titles.push(cur.title);
    acc.keys.push(cur.dataIndex);
    return acc;
  }, {});
  const tableBody = tableList.map(item => {
    return obj.keys.map(key => item[key]);
  });
  return [obj.titles, ...tableBody];
};
​
const exportTableData = () => {
  const tableData = transData(
      columns,
      data.value
  );
  // 将一组 JS 数据数组转换为工作表
  const ws = XLSX.utils.aoa_to_sheet(tableData);
  // 创建 workbook
  const wb = XLSX.utils.book_new();
  // 将 工作表 添加到 workbook
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 将 workbook 写入文件
  XLSX.writeFile(wb, '销售数据.xlsx');
};
​
​
const downloadExcel = () => {
  const response = myAxios.post('/sale/data/download', null, {
    responseType: 'blob',
  }).then((res) => { // 处理返回的文件流
    const content = res
    const blob = new Blob([content])
    console.log(content)
    const fileName = '销售数据.xlsx';
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  });
};
​
const exportData = async () => {
  const response: any = await myAxios.post('/sale/data/export');
  if (response?.code === 0) {
    const excelBase64 = response.data; // 接收后端返回的 Base64 编码字符串
    console.log(excelBase64)
    const blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    const fileName = '销售数据.xlsx';
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  }
}
​
// 将 Base64 字符串转换为 Blob 对象
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  return new Blob(byteArrays, {type: contentType});
}
​
​
</script>
<style scoped>
​
</style>

后端

Controller 层：

@Slf4j
@RestController
@RequestMapping("/sale")
public class SaleController {    
    @PostMapping("/data/download")
    public void exportSaleDetails(HttpServletResponse response) throws UnsupportedEncodingException {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​
        // 设置响应头信息
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
​
        String fileName = "销售数据1.xlsx";
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
​
        // 写出Excel文件到响应
        try {
            EasyExcel.write(response.getOutputStream(), SaleData.class)
                    .sheet("合伙人业务订单")
                    .doWrite(list);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
​
    @PostMapping("/data/export")
    public BaseResponse<String> exportSaleData() throws UnsupportedEncodingException {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​
        // 生成 Excel 文件并转换为 Base64 编码
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        EasyExcel.write(outputStream, SaleData.class).sheet("Sheet1").doWrite(list);
        byte[] bytes = outputStream.toByteArray();
        String excelBase64 = Base64.getEncoder().encodeToString(bytes);
​
        // 返回 Base64 编码的 Excel 内容给前端
        return ResultUtils.success(excelBase64);
    }
    
    @PostMapping("/data/list")
    public BaseResponse<List<SaleData>> listSaleData() {
        List<SaleData> list = new ArrayList<>();
        list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L,"2024-01-01 13:00:00"));
        list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L,"2025-01-01 13:00:00"));
        list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L,"2024-03-01 13:00:00"));
        list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L,"2024-02-01 13:00:00"));
        return ResultUtils.success(list);
    }
}

SaleData：

@Data
@AllArgsConstructor
public class SaleData implements Serializable {
​
    @ExcelProperty("订单号")
    private Long id;
​
    @ExcelProperty("品种")
    private String name;
​
    @ExcelProperty("价格")
    private BigDecimal price;
​
    @ExcelProperty("数量")
    private Integer totalNum;
​
    @ExcelProperty("交易对象")
    private Long userId;
​
    @ExcelProperty("交易时间")
    private String datetime;
}

总结

相信大家看完也能学会导出 Excel，可以根据具体的开发需求选择不同的方案，如果有更好的方案欢迎探讨哈。

Java雪荷
关注
  • 35
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端excel导出
Crush_a的博客
11-09 240
前端excel导出
excel导入导出，包括纯前端解析，后端解析导入导出方式
03-27
excel导入导出，包括导入（纯前端解析、后端解析），导出（从前端导入到后端，生成excel导出到前端），完全就是开发excel方面所需要的，强烈推荐！！！
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端实现导出Excel
最新发布
weixin_42395075的博客
07-12 354
前端导出excel
前端导出excel
12-21
前端导出Excel，不用在后台处理，通过要导出的信息在界面显示，既可以通过js导出Excel。很实用
纯前端 导出Excel文件(包括导出用数组数据模拟文件数据和实际后端返回的文件数据)的 方法
qq_44327851的博客
10-26 4383
在纯前端导出文件的一种常见方法是通过生成下载链接来实现，可以使用Blob对象和URL.createObjectURL()方法来实现,因为现在工作中主要运用的前端框架是Angular，这篇文章将以angular为例进行阐述。
前端与后端协同：实现Excel导入导出功能
interest_ing_的博客
04-05 2761
在现代Web应用中，Excel文件的导入导出是一个常见的需求。用户希望能够方便地将数据导入到系统中，或者将系统数据导出到Excel文件中。本文将介绍如何在前端和后端之间实现这一功能，示例采用Spring Boot和Vue.js技术栈。
前端实现导出Excel文件
cxz
08-12 466
直接上代码 //exportData是后台api接口 exportData({ ...this.queryParams }).then(res => { const fileName = `文件名字.xlsx`; const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }); let link = document.createElement('a'); link.href = URL.cre
前端导出Excel表格
weixin_45725785的博客
03-04 3974
vue + xlsx实现Excel导出 简单粗暴步骤，无需花里胡哨 第一步：npm install --save xlsx@0.14.3 第二步：全局封装公共方法（或者局部定义） import XLSX from "xlsx"; let common = { install: function ($Vue) { let Vue = $Vue.prototype; let common = { // 导出excel表格 // data：导出参数，name：表格
读取excel用前端还是后端好_前端实现导出excel的功能，看完就可以翻篇了
weixin_39902870的博客
01-13 2780
前言导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成，我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob[1]对象...
前端表格导出Excel
02-05
前端表格数据导出为excel表格，导出的数据为表格显示数据，付代码，类
java excel异步导出_如何实现前端异步调用导出Excel？
weixin_39938165的博客
02-25 3414
今天分享JBolt极速开发平台中使用的异步下载文件的解决方案。需求场景：列表查询界面有一个【导出Excel】按钮，需要点击按钮，弹出loading信息框，异步调用后台action，得到数据库数据后生成Excel数据然后响应发送到前端，异步请求拿到数据后，当做文件下载下来。重点：异步请求，导出Excel，前端拿到后做成文件下载解决方案：1、前端异步请求点击按钮的时候，执行一个异步请求，去访问Acti...
前端页面导出excel文件功能(导出)
User_Name9999的博客
07-06 9011
前端导出excel表格
前端实现excel导出表格(纯前端实现)
liang04273的博客
01-06 1778
vue中前端自己实现excel导出表格。实现是给表格绑定一个id，通过获取dom来导出。
需求虽小但是问题很多，浅谈JavaScript导出excel文件
Yong.Sunshine
06-13 1168
最近我在进行一些前端小开发，遇到了一个小需求：我想要将数据导出到 Excel 文件，并希望能够封装成一个函数来实现。这个函数需要接收一个二维数组作为参数，数组的第一行是表头。在导出的过程中，要能够确保避免出现中文乱码的情况。另外，考虑到数组中可能包含回车、逗号、换行符等特殊字符，咱们该如何处理这些情况呢？
前端实现Excel表格导出
weixin_49001056的博客
02-22 586
前端实现Excel表格导出 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> /* 此样式仅用于浏览器页面效果，Ex
vue前端调用后端接口导出excel文件
05-02
要在 Vue 前端调用后端接口导出 Excel 文件，可以采用以下步骤： 1. 在后端编写导出 Excel 的接口，通常采用 Spring MVC 或者 Express 等框架，在接口中使用 Apache POI 或者其他 Excel 库生成 Excel 文件，并将生成的文件以流的形式返回给前端。 2. 在前端编写调用后端接口的代码，通常可以使用 axios 或者其他 HTTP 请求库来发送请求，并将返回的文件流保存到本地，同时进行下载操作。 以下是一个简单的 Vue 组件示例代码： ```html <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script> import axios from 'axios' export default { methods: { exportExcel() { axios({ url: '/api/export', method: 'GET', responseType: 'blob', }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'export.xlsx') document.body.appendChild(link) link.click() }) }, }, } </script> ``` 以上代码中，我们定义了一个 `exportExcel` 方法，当用户点击按钮时会触发该方法。在方法中，我们使用 axios 发送 GET 请求，并将响应类型设置为 blob，这样可以保留文件流的形式。在获取到响应后，我们将其转换为 URL 对象，创建一个下载链接，并触发点击操作，从而实现文件的下载。我们可以将请求的 URL 设置为后端提供的接口，例如 `'/api/export'`，从而实现与后端的交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值