Jquery ajax请求导出Excel表格的实现代码

下面将为你详细讲解实现Jquery ajax请求导出Excel表格的完整攻略。

一、准备工作

实现Jquery ajax请求导出Excel表格，我们需要以下的工具、框架和库：

• Jquery框架
• file-saver库
• Blob对象
• Excel文件模板

二、实现思路

1. 通过ajax请求获取导出Excel的数据；
2. 将数据格式转换成Excel文件的格式，这里我们需要使用到file-saver库和Blob对象；
3. 创建Excel文件模板，并将数据填充到模板中；
4. 将填充过数据的Excel文件下载至本地。

三、具体实现

1. 引入依赖

首先，我们需要引入Jquery和file-saver库的依赖。

<!-- 引入Jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入file-saver库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2. 发送ajax请求获取数据

通过ajax请求获取需要导出的数据，并将数据传递给后台进行处理。这里我们通过Jquery的ajax函数实现。

// 发送ajax请求获取导出Excel的数据
$.ajax({
  url: 'export/excel',
  type: 'get',
  data: {
    startDate: '2021-01-01',
    endDate: '2021-01-31'
  },
  success: function(data) {
    // 数据请求成功后，进行数据格式转换并生成Excel表格
  },
  error: function() {
    alert('数据请求失败');
  }
})

3. 将数据转换成Excel格式

在请求成功后，我们需要将返回的数据进行格式转换，将数据格式转换成Excel文件的格式。这里我们使用Javascript中的Blob对象，将数据写入到Blob对象中。

success: function(data) {
  // 数据请求成功后，进行数据格式转换并生成Excel表格
  const sheetName = 'sheet1'; // Excel的表格名称
  const fileName = 'data.xlsx'; // 生成的Excel文件名称

  const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'; // Excel文件类型

  const dataConvert = new Uint8Array(data); // 将数据转换为Uint8Array格式
  const dataBlob = new Blob([dataConvert], {type: fileType}); // 将数据写入到Blob对象中

  // 文件下载
  saveAs(dataBlob, fileName);
}

4. 填充数据到Excel文件中

将数据格式转换成Excel文件的格式之后，我们需要根据Excel文件模板，将数据填充到模板中。这里我们使用js-xlsx库来操作Excel文件。下面是一个例子：

success: function(data) {
  // 数据请求成功后，进行数据格式转换并生成Excel表格
  const sheetName = 'sheet1'; // Excel的表格名称
  const fileName = 'data.xlsx'; // 生成的Excel文件名称

  const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'; // Excel文件类型

  const dataConvert = new Uint8Array(data); // 将数据转换为Uint8Array格式
  const dataBlob = new Blob([dataConvert], {type: fileType}); // 将数据写入到Blob对象中

  // 填充数据到Excel文件模板中
  const workbook = XLSX.read(dataConvert, {type: 'array'});
  const worksheet = workbook.Sheets[sheetName];
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let R = range.s.r; R <= range.e.r; ++R) {
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cellAddress = {c:C, r:R};
      const cell = worksheet[XLSX.utils.encode_cell(cellAddress)];
      if (!cell) continue;
      cell.v = '填充的数据';
    }
  }

  // 文件下载
  const wbout = XLSX.write(workbook, {bookType:'xlsx', type: 'binary'});
  saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), fileName);
}

5. 示例1

在下面的示例中，我们通过ajax请求获取一组数据，然后通过JS操作将数据填充到Excel文件模板中，最后将填充好的Excel文件下载至本地。

$.ajax({
  url: '/export/excel',
  type: 'get',
  data: {
    startDate: '2021-01-01',
    endDate: '2021-01-31'
  },
  success: function(data) {
    const sheetName = 'sheet1';
    const fileName = 'data.xlsx';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
    const dataConvert = new Uint8Array(data);
    const dataBlob = new Blob([dataConvert], {type: fileType});

    const workbook = XLSX.read(dataConvert, {type: 'array'});
    const worksheet = workbook.Sheets[sheetName];
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    for (let R = range.s.r; R <= range.e.r; ++R) {
      for (let C = range.s.c; C <= range.e.c; ++C) {
        const cellAddress = {c:C, r:R};
        const cell = worksheet[XLSX.utils.encode_cell(cellAddress)];
        if (!cell) continue;
        cell.v = '填充的数据';
      }
    }

    const wbout = XLSX.write(workbook, {bookType:'xlsx', type: 'binary'});
    saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), fileName);
  },
  error: function() {
    alert('请求数据失败');
  }
})

6. 示例2

下面是另一个示例，我们在请求成功后，直接将返回的数据生成Excel文件，并下载至本地。

$.ajax({
  url: '/export/excel',
  type: 'get',
  data: {
    startDate: '2021-01-01',
    endDate: '2021-01-31'
  },
  success: function(data) {
    const fileName = 'data.xlsx';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8';
    const dataConvert = new Uint8Array(data);
    const dataBlob = new Blob([dataConvert], {type: fileType});

    saveAs(dataBlob, fileName);
  },
  error: function() {
    alert('请求数据失败');
  }
})

四、总结

通过上述的实现操作，我们已经可以使用Jquery ajax请求导出Excel表格了。需要注意的是，根据实际业务需要，数据格式的转换和Excel文件模板的填充方式会有所不同，需要根据具体情况进行修改。