ajax 下载 easyexcel

要在前端使用 EasyExcel，可以使用 ajax 下载。以下是一个简单的示例：

function downloadExcel() {
  $.ajax({
    url: "/download/excel",
    type: "GET",
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {
      var downloadUrl = window.URL.createObjectURL(data);
      var a = document.createElement("a");
      a.href = downloadUrl;
      a.download = "example.xlsx";
      document.body.appendChild(a);
      a.click();
    }
  });
}

其中，`url` 是后端接口地址，`type` 是请求方式，`xhrFields` 设置响应类型为 `blob`，`success` 回调函数中处理返回的数据，将数据转化为下载链接，并模拟点击下载链接来实现下载。

相关问题

ajax 后端下载 easyexcel

使用 Ajax 请求后端下载 easyexcel 可以通过以下步骤实现：

1. 前端使用 Ajax 请求后端接口，将需要导出的数据传递给后端。
2. 后端接收到请求后，使用 easyexcel 将数据写入 Excel 文件。
3. 将生成的 Excel 文件返回给前端进行下载。

下面是一个示例代码：

前端代码：

$.ajax({
  url: '/export',
  type: 'POST',
  data: { data: JSON.stringify(data) },
  xhrFields:{
    responseType: 'blob'
  },
  success: function(res) {
    // 下载文件
    var blob = new Blob([res], {type: 'application/vnd.ms-excel'})
    var downloadUrl = URL.createObjectURL(blob)
    var a = document.createElement("a")
    a.href = downloadUrl
    a.download = 'export.xlsx'
    document.body.appendChild(a)
    a.click()
    URL.revokeObjectURL(downloadUrl)
  }
})

后端代码（使用 Spring Boot 作为示例）：

@PostMapping("/export")
public void export(@RequestParam("data") String data, HttpServletResponse response) {
  try {
    // 将数据写入 Excel 文件
    OutputStream out = response.getOutputStream();
    EasyExcel.write(out, DemoData.class).sheet("Sheet1").doWrite(dataList);

    // 设置响应头，告诉浏览器下载文件
    response.setContentType("application/vnd.ms-excel");
    response.setHeader("Content-Disposition", "attachment;filename=export.xlsx");
    response.flushBuffer();
  } catch (IOException e) {
    e.printStackTrace();
  }
}

需要注意的是，由于是后端下载文件，需要在响应头中设置 Content-Disposition 为 attachment，告诉浏览器下载文件，而不是直接打开。同时，需要将响应类型设置为 application/vnd.ms-excel，告诉浏览器这是 Excel 文件。

ajax 使用easyexcel模板导出excel

可以使用 EasyExcel 结合 Ajax 实现模板导出 Excel 的功能，具体步骤如下：

1. 在前端页面中使用 Ajax 向后端发送请求，请求获取 Excel 数据；
2. 后端根据请求参数生成 Excel 数据，并利用 EasyExcel 将数据写入 Excel 模板；
3. 后端将生成的 Excel 文件流返回给前端；
4. 前端利用 Blob 对象创建文件流，并使用 FileSaver.js 将文件保存至本地。

以下是一个简单的示例代码：

前端代码：

function exportExcel() {
  $.ajax({
    url: '/excel/export',
    type: 'POST',
    dataType: 'json',
    success: function(res) {
      var blob = new Blob([res], { type: 'application/vnd.ms-excel' });
      saveAs(blob, 'example.xlsx');
    },
  });
}

后端代码：

@PostMapping("/excel/export")
public void exportExcel(HttpServletResponse response) throws IOException {
  // 获取 Excel 数据并填充至模板中
  List<ExcelData> dataList = getDataList();
  InputStream inputStream = getClass().getResourceAsStream("/templates/example.xlsx");
  OutputStream outputStream = response.getOutputStream();
  EasyExcel.write(outputStream).withTemplate(inputStream).sheet().doFill(dataList);

  // 设置响应头
  response.setContentType("application/vnd.ms-excel");
  response.setHeader("Content-disposition", "attachment;filename=example.xlsx");
  response.flushBuffer();
}

其中，`getDataList()` 方法用于获取 Excel 数据，`example.xlsx` 是 Excel 模板文件。需要注意的是，EasyExcel 需要在后端项目中引入依赖，同时在前端页面中引入 FileSaver.js。