React JS中PDF URL转Base64失效及IFrame内PDF下载咨询

问题1：URL转Base64无效的修复方案 #

你当前用window.btoa(props.offerLetterURL)编码的是URL字符串本身，而非PDF文件的二进制内容，所以还原后无法得到有效PDF。正确流程是先获取PDF的二进制数据，再编码为Base64：

async function urlToBase64(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]); // 移除data URI前缀
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// 使用示例
urlToBase64(props.offerLetterURL).then(base64Content => {
  // 这里的base64Content是可还原为有效PDF的编码
});

问题2：从iframe下载PDF的可行方法 #

方法1：直接通过URL创建下载链接（最简单） #

既然iframe能正常加载PDF，说明URL可直接访问，直接生成a标签触发下载：

function downloadPDF(url) {
  const a = document.createElement('a');
  a.href = url;
  a.download = 'offer-letter.pdf'; // 自定义文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// 调用：传入iframe的src地址
downloadPDF(document.getElementById('hiddenDownloader').src);

方法2：通过Fetch获取Blob后下载（兼容更多场景） #

如果需要处理跨域（服务器允许的话）或自定义文件处理，可先获取Blob再创建下载链接：

async function downloadPDF(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  const tempUrl = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = tempUrl;
  a.download = 'offer-letter.pdf';
  document.body.appendChild(a);
  a.click();
  
  document.body.removeChild(a);
  URL.revokeObjectURL(tempUrl); // 释放临时资源
}

// 调用
downloadPDF(document.getElementById('hiddenDownloader').src);

方法3：同源下利用iframe内容触发下载 #

若PDF域名与你的页面同源，可尝试通过iframe的contentWindow操作：

function downloadFromIframe() {
  const iframe = document.getElementById('hiddenDownloader');
  iframe.contentWindow.print(); // 部分浏览器会弹出下载选项
  // 或尝试直接触发保存（需页面支持）
  // iframe.contentWindow.document.execCommand('SaveAs', true, 'offer-letter.pdf');
}

注：跨域场景下方法3会受浏览器同源策略限制，优先使用方法1或2。

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