React应用中Axios调用获取PDF文件数据遇语法错误求助

问题分析 #

• 多余的responseEncoding: 'binary'配置：当responseType设为arraybuffer时，Axios会自动处理二进制数据，该配置会干扰解析逻辑，引发语法错误。
• 错误的请求头：GET请求无需设置Content-Type: application/json，这会让服务器误解请求格式，导致响应异常。
• 缺少PDF数据的转换与iframe绑定逻辑：当前代码仅打印响应，未将二进制数据转为可被iframe识别的Blob URL。

修正后的代码 #

previewPDF = (attachment) => {
  const config = {
    responseType: 'arraybuffer',
    headers: {
      'Accept': 'application/pdf'
    }
  };

  const url = `${Navigation.transactionalApiPath}${apiUrls.attachmentsGetFile}/${attachment.Id}/true`;
  
  axios.get(url, config)
    .then(response => {
      // 将arraybuffer转为Blob格式
      const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
      // 创建可被iframe识别的Blob URL
      const pdfUrl = URL.createObjectURL(pdfBlob);
      
      // 绑定到iframe（假设页面存在id为pdfPreview的iframe元素）
      const iframe = document.getElementById('pdfPreview');
      if (iframe) {
        iframe.src = pdfUrl;
      }
    })
    .catch(error => {
      console.error('获取PDF失败:', error);
      // 可根据需求添加错误提示逻辑
    });
};

额外注意事项 #

• 确保iframe元素已在DOM中存在，且设置了合适的宽高样式。
• 预览完成后（比如组件卸载时），记得调用URL.revokeObjectURL(pdfUrl)释放内存，避免内存泄漏。
• 若仍有问题，可先通过Postman测试接口，确认服务器是否能正常返回完整的PDF文件。

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