React中GraphQL查询返回PDF URL但无法下载的问题求助

核心问题 #

你当前的代码逻辑错误：后端返回的是PDF文件的直接访问URL，但你却把它当作base64编码的PDF内容传入b64toBlob函数处理，这会导致解析失败，无法生成有效的Blob对象，最终下载功能失效。

解决方案 #

针对返回URL的场景，有两种实现下载的方式，根据你的需求选择：

方式1：直接触发URL下载（最简单） #

直接利用返回的URL创建下载链接，无需额外处理：

const downloadPdf = (pdfUrl: string, fileName = 'report.pdf') => {
  const link = document.createElement('a');
  // 若后端返回相对路径，需补全完整域名
  link.href = pdfUrl;
  link.download = fileName;
  // 临时添加链接到DOM，确保点击生效
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

同时修改onCompleted回调，直接传入返回的URL：

onCompleted: (result) => {
  console.log('Request completed');
  const pdfUrl = result?.data?.getCollectionReportOverview;
  console.log(pdfUrl);
  if (pdfUrl) {
    downloadPdf(pdfUrl);
  }
},

方式2：先请求URL获取Blob再下载（适用于跨域/自定义处理场景） #

如果后端URL存在跨域限制，或者需要对PDF内容做额外处理，可以先通过fetch请求获取Blob，再生成下载链接：

const downloadPdf = async (pdfUrl: string, fileName = 'report.pdf') => {
  try {
    const response = await fetch(pdfUrl);
    if (!response.ok) throw new Error('Failed to fetch PDF');
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('PDF download failed:', error);
  }
};

修改onCompleted时需使用异步调用：

onCompleted: async (result) => {
  console.log('Request completed');
  const pdfUrl = result?.data?.getCollectionReportOverview;
  console.log(pdfUrl);
  if (pdfUrl) {
    await downloadPdf(pdfUrl);
  }
},

额外注意点 #

• 验证URL有效性：在浏览器中直接打开后端返回的URL，确认能正常加载PDF文件。
• 跨域处理：若URL域名与前端不同，需后端配置CORS允许前端域名访问该资源，否则fetch方式会报错。
• 变量名一致性：你的GraphQL查询使用sortby，但前端变量是sortBy（驼峰），当前查询正常但建议统一命名，避免潜在问题。

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