如何通过JavaScript下载API返回的PDF字节数组

看起来你在Swagger里调用API能正常拿到PDF下载链接，但用JS处理返回的字节数组时遇到了转base64为空的问题，我来帮你捋捋可能的坑和解决方案~

先说说你之前代码里可能踩的问题：

• 你写的new Uint8Array([data.action_api_response])多套了一层[]，如果data.action_api_response本身就是字节数组的话，直接传进去就行，加[]会把整个数组当成Uint8Array的单个元素，导致长度异常，转出来的base64自然是空的。
• 另外，请求API时有没有设置正确的responseType？如果没指定，默认会按JSON解析响应，拿到的不是原始字节流，这也会导致后续处理失败。

下面给你两个可行的方案，你可以选适合自己的：

方案一：正确转换字节数组为Base64（适配你已有的函数） #

首先要确保请求API时拿到正确的ArrayBuffer，比如用fetch的写法：

fetch('你的API地址', {
  method: 'GET', // 根据你的API实际请求方法调整
  headers: {
    // 带上必要的请求头，比如Authorization、Content-Type等，要和Swagger里的请求一致
  }
})
.then(response => {
  if (!response.ok) throw new Error('API请求失败');
  return response.arrayBuffer(); // 关键：指定获取ArrayBuffer类型的响应
})
.then(buffer => {
  // 修正后的ArrayBuffer转Base64函数
  function arrayBufferToBase64(buffer) {
    const bytes = new Uint8Array(buffer);
    let binary = '';
    const chunkSize = 1024;
    
    for (let i = 0; i < bytes.length; i += chunkSize) {
      const chunk = bytes.slice(i, i + chunkSize);
      binary += String.fromCharCode.apply(null, chunk);
    }
    
    const base64Str = btoa(binary);
    console.log(base64Str); // 现在应该能正常输出内容了
    // 这里调用你已有的处理base64的下载函数
    // 比如你的DownloadFunction(base64Str);
  }
  arrayBufferToBase64(buffer);
})
.catch(err => console.error('处理出错:', err));

如果你的API返回的是JSON格式，字节数组存在某个字段（比如action_api_response）里，那要先提取字段再转换：

fetch('你的API地址', { /* 请求配置 */ })
.then(response => response.json())
.then(data => {
  const byteArray = new Uint8Array(data.action_api_response); // 直接用数组创建Uint8Array
  const base64Str = btoa(String.fromCharCode.apply(null, byteArray));
  console.log(base64Str);
})

方案二：直接用Blob下载（更简单，无需转Base64） #

其实不用转base64也能直接完成下载，这种方式更直接，还能避免转换过程中出问题：

fetch('你的API地址', {
  method: 'GET',
  headers: { /* 你的请求头 */ }
})
.then(response => response.arrayBuffer())
.then(buffer => {
  // 创建PDF类型的Blob对象
  const pdfBlob = new Blob([buffer], { type: 'application/pdf' });
  // 生成临时下载链接
  const downloadUrl = URL.createObjectURL(pdfBlob);
  // 创建a标签触发下载
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = '我的文档.pdf'; // 设置下载后的文件名
  document.body.appendChild(link);
  link.click();
  // 清理临时资源，避免内存泄漏
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
})
.catch(err => console.error('下载出错:', err));

额外排查建议 #

• 先在控制台打印buffer.byteLength或者byteArray.length，看看是否有数据，如果长度为0，说明请求没拿到正确内容，要检查API的请求参数、权限、headers是否和Swagger里的完全一致。
• 确认API返回的响应类型是application/pdf或者application/octet-stream，如果是JSON格式，要确保里面的字节数组是正确的原始数据。

备注：内容来源于stack exchange，提问作者KonTiki