场景: 上传 xlsx 批量导入用户数据之前下载 xlsx 模板

方案	优点	缺点
1. 使用 sheetjs前端导出 xlsx	简单，好实现	增加项目体积
2. 请求后端接口，后端生成返回 xlsx 模板，前端下载文件	简单，好实现	需要后端支持
3. 模板文件放前端项目的 public 目录	方便下载快，实现简单	每个模板要对应一个 xlsx 文件
4. 把 xlsx 模板转 base64, 前端实现下载 base64 到 xlsx	逼格高	实现麻烦了一点，没想到 base64 编码比真实文件还大

选择方案 3 最实在

模板放 public 目录下的实现

<a href="./template.xlsx" style="textDecoration: underline" download>
  下载模板
</a>

使用 base64 实现前端下载 xlsx 模板

function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
}
function downloadFromBase64() {
  let b64Data = ""; // xlsx 文件的 base64 编码
  let contentType = "application/octet-stream";
  const blob = b64toBlob(b64Data, contentType);
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.setAttribute("download", "excel.xlsx");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

参考

Creating a BLOB from a Base64 string in JavaScript