使用ajax请求下载excel文件_ajax下载excel

需求：需要传入集合到后台查询数据，并导出excel，这时候get方式就不好用了，需要post请求带集合参数传入后台

ajax本身不支持下载文件，所以实现这个需求要分两步：

1、使用ajax带集合参数去后台请求数据并生成文件；

2、在请求成功的函数中创建get请求的链接进行下载

============
前端代码：

$.ajax({
   async: true,
    url: url,
    type: "post",
    dataType: "json",
    data: data,
    success: function (result, status, xhr) {
    	// 创建get请求路径
		let downloadUrl = "../FileDownloadExport?fileName="+data.fileName;
		// 创建a标签
		let label = $("<a>");
		// 添加属性
		label.prop("href",downloadUrl);
		// 追加标签
		$("body").append(label);
		// 点击a标签，为什么要加[0]不懂，不加点击函数不生效
		label[0].click();
		// 点击后移除标签
		label.remove();
    error: function (xhr, status, error) {
        alert("请求失败")
});
============= 
后端请求文件代码（调用了hutool的工具类）：
 
@PostMapping("/FileDownloadRequest")
@ResponseBody
protected Map<String,String> doPost(HttpServletRequest request, HttpServletResponse response) throws IOException{
    // 文件存储路径
    String path = "D:/fileupload/file/Export/";
    // 文件名
    String fileName = request.getParameter("fileName");
    // 获取导出文件格式
    String op = request.getParameter("op");
    // 条件集合对象
    Map<String, String> map = new HashMap<>();
    // 存放题目数据
    List<Question> questionsForExport = questionService.getQuestionsForExport(map);
    // 转换集合类型
    ArrayList<Question> questionArrayList = CollUtil.newArrayList(questionsForExport);
    if ("exportExcel".equals(op)){
        // 导出excel文件
        ExcelWriter writer = ExcelUtil.getWriter(path + fileName);
        writer.write(questionArrayList,true);
        writer.close();
    }else if ("exportWord".equals(op)){
        //导出word文件
        Word07Writer word07Writer = new Word07Writer();
        for (Question question : questionArrayList) {
            word07Writer.addText(new Font("微软雅黑",Font.PLAIN,16), question.toString());
        File file = FileUtil.file(path + fileName);
        word07Writer.flush(file);
        word07Writer.close();
    }else if ("exportTxt".equals(op)){
        // 导出txt文件
        FileWriter fileWriter = new FileWriter(path+fileName);
        fileWriter.writeLines(questionsForExport);
    Map<String,String> fileInfoMap = new HashMap<>();
    fileInfoMap.put("fileName", fileName);
    return fileInfoMap;
============== 
后端下载文件代码（调用了在hutool工具类的基础上封装的工具类）：
 
@GetMapping("/FileDownloadExport")
protected void doDownload(HttpServletRequest request, HttpServletResponse response) throws IOException{
   String path = "D:/fileupload/file/Export/";
   String fileName = request.getParameter("fileName");
   // 文件写入输出流
   DownloadUtil.downLoadFile(path, fileName, response);
GET请求
window.location.href = "http://localhost:8080/xx/map/mapdownlind.action?time1="+time1+"&time2="+time2;
POST请求
因为ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的，而文件的下载是以二进制形式进行的，所以ajax无法处理二进制流的response来下载文件，只能通过原生ajax的方法进行下载
 var xhr = new XM
				最近在做项目的过程中，遇到需要使用Ajax下载Excel文件的需求，以往都是通过使用form表单提交的方式来下载文件。通过一番研究，其主要实现代码如下：
1、后台接口返回二进制流
// 生成excel文件
	@RequestMapping(value = "/study", method = RequestMethod.POST)
	public void study(@RequestBod...
				在统计业务需求中，需要去实时的统计并下载Excel文件。当数据量特别大的时候，就需要给予用户提示。点击下载时界面禁止用户操作，当弹出下载窗口时允许操作。
由于后台业务逻辑，在获取数据和统计数据的过程中耗时比较长，所以在excel文件导出的过程中加了一个提示用户正在导出数据的等待页面，现在用的是jquery的插件jquery.blockUI.js。
这个插件的主要用法就是在发送异步请求之
				通过Ajax请求下载Execl 的问题，掉进一个坑里半个多小时，特此来记录一下 。
起初 我误以为是后台的问题，然而调试了一下并不是这样的，也不会报错，且进入了success 函数。
以下的事件及请求参数看上去貌似也没问题。
<a href="#" class="easyui-linkbutton" onclick="downLoadExcelTemplate()">下载...
Ajax请求导出Excel的问题描述：
前端发起Ajax请求get或post，后台使用Poi生成excel文件，最后用response输出excel文件流。整个调用过程都没有报任何错，excel文件也生成在本地，但浏览器没有弹出文件下载，毫无反应。
开始一直以为是浏览器兼容性，或后台输出文件流代码有问题，调了半天，也都一样，不报任何错。后来上网搜发现在类似的问题，Ajax导出...
				Vue.js 中使用 AJAX 进行文件下载（包括 Excel 文件）通常涉及以下几个步骤：
1. **安装插件**：首先需要一个支持处理文件流的插件，如 Axios（一个基于 Promise 的 HTTP 库），配合 FileSaver.js 或 js-file-download 等用于浏览器本地保存文件的库。
```bash
npm install axios file-saver
2. **创建数据导出函数**：使用 Axios 发送 GET 请求到服务器端获取 Excel 数据。假设你有一个 API 接口 `exportExcel`，它返回一个包含 Excel 内容的数据流（如 CSV 或 Blob 对象）。
```javascript
import axios from 'axios';
import saveAs from 'file-saver';
export function downloadExcel() {
  const url = '/api/exportExcel'; // 替换为实际的 API URL
  axios({
    method: 'get',
    responseType: 'blob'
  }).then((response) => {
    saveAs(response.data, 'report.xlsx'); // 将响应数据转换为可下载的文件
    .catch((error) => {
      console.error('Error downloading Excel:', error);
3. **触发下载**：当你需要让用户下载 Excel 时，可以调用 `downloadExcel` 函数。
4. **兼容性考虑**：为了确保在所有现代浏览器上都能正常工作，你可能需要添加一些条件判断，比如检查是否支持 `fetch` 或 `Blob`。如果浏览器不支持，可能需要提供一个备用的解决方案。