前端调用接口,一次性下载多个excel文件

可以使用 JavaScript 的 XMLHttpRequest 或者 fetch API 发起多个并行的请求,并将文件内容保存到本地。案例是使用 fetch API 实现一次性下载多个 Excel 文件:

function downloadExcel(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
      URL.revokeObjectURL(link.href);
    });
}

// 调用接口获取多个 Excel 文件路径
fetch('your_api_url')
  .then(response => response.json())
  .then(data => {
    // 下载多个 Excel 文件
    data.excelPaths.forEach((path, index) => {
      downloadExcel(path, `excel${index + 1}.xlsx`);
    });
  });

fetch API 调用接口获取多个 Excel 文件的路径,然后使用 forEach 方法遍历路径数组,并调用 downloadExcel 函数下载每个 Excel 文件。

接口返回的数据格式应为包含多个 Excel 文件路径的 JSON 对象。

第二种方式:

要下载多个Excel文件,前端使用JavaScript来处理接口返回的多个文件的Base64数据,并将其转换为Blob对象,然后创建并下载多个Excel文件。

function downloadMultipleExcelFiles() {
  // 假设接口返回的多个Excel文件的Base64数据存储在一个数组中
  var excelFilesBase64 = [
    "base64data1",
    "base64data2",
    // 添加更多的Base64数据...
  ];

  // 遍历每个Excel文件的Base64数据
  excelFilesBase64.forEach(function(base64Data, index) {
    // 将Base64数据转换为Blob对象
    var byteCharacters = atob(base64Data);
    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });

    // 创建下载链接
    var downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(blob);

    // 设置文件名
    var fileName = "file" + (index + 1) + ".xlsx";
    downloadLink.download = fileName;

    // 添加下载链接到页面并模拟点击下载
    document.body.appendChild(downloadLink);
    downloadLink.click();

    // 清理下载链接
    document.body.removeChild(downloadLink);
  });
}

前端调用接口返回的多个Excel文件的Base64数据,并将其转换为Blob对象,然后创建并下载多个Excel文件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值