前端JS生成XLSX文件取消自动下载改为保存至服务端的方法咨询

前端修改 #

你现有的ExportToExcel函数已经支持返回base64格式的文件内容，只需调整调用逻辑，把生成的文件内容发送给服务端即可，无需触发本地下载：

1. 新增上传相关工具函数，直接复制以下代码到你的JS逻辑中即可：

// 点击触发的上传函数
async function uploadExcelToServer() {
  // 第三个参数传true，直接获取base64编码的XLSX内容，不会触发本地下载
  const base64Excel = ExportToExcel('xlsx', null, true);
  
  // 方式1：转成Blob用FormData上传，通用文件上传逻辑，推荐使用
  const formData = new FormData();
  const excelBlob = base64ToBlob(base64Excel, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  formData.append('excel_file', excelBlob, '导出表格.xlsx');
  
  // 发送请求到后端接口，将接口地址替换为你自己的服务端地址
  const res = await fetch('/api/save-excel', {
    method: 'POST',
    body: formData
  });
  const result = await res.json();
  result.success ? alert('文件已保存到服务端') : alert('保存失败：' + result.msg);
}

// base64转Blob工具函数，无需修改直接使用
function base64ToBlob(base64, mimeType) {
  const byteCharacters = atob(base64);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], {type: mimeType});
}

// 原有导出函数保持不变即可
function ExportToExcel(type, fn, dl) {
       var elt = document.getElementById('tour');
       var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
       return dl ?
         XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
         XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
}

2. 修改触发按钮的点击事件：

<!-- 把原来的onclick替换成下面的内容 -->
onclick="uploadExcelToServer()"

可选简化方案：如果后端支持直接接收base64内容，可以跳过转Blob的步骤，直接把base64Excel作为字符串参数传给后端，后端自行解码保存即可，代码更简单，但大文件场景下base64体积比原文件大1/3，可能触发请求大小限制。

后端适配 #

你需要在服务端新增一个对应的POST接口：

• 接口路径要和前端请求的地址保持一致，比如上述示例的/api/save-excel
• 接口需要支持multipart/form-data格式的请求参数，从excel_file字段中拿到上传的文件流
• 把拿到的文件流写入服务器磁盘或者对应的存储服务，返回JSON格式的成功/失败响应即可。

内容的提问来源于stack exchange，提问作者Nidhi