桌面端浏览器可下载PDF，移动端浏览器无法下载求助

移动端浏览器（尤其是iOS Safari）对动态创建的<a>标签结合Data URL的下载支持存在兼容性问题，具体表现为不触发下载且无报错，可通过以下两种方案解决：

方案一：确保下载链接挂载到DOM后再触发点击 #

部分移动端浏览器要求元素必须存在于DOM树中才能响应click事件，修改代码如下：

fetch('/Documents/GenerateReportPdf', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => {
  const fileName = 'Report.pdf';
  const downloadLink = document.createElement('a');
  downloadLink.href = data.url;
  downloadLink.download = fileName;
  // 将链接临时添加到页面DOM
  document.body.appendChild(downloadLink);
  // 触发下载点击
  downloadLink.click();
  // 下载完成后移除临时元素
  document.body.removeChild(downloadLink);
})
.catch(err => console.error(err));

方案二：转换为Blob+Object URL（兼容iOS Safari） #

iOS Safari不支持直接通过Data URL下载文件，需将Base64编码的Data URL转换为Blob，再通过createObjectURL生成可下载链接，这是兼容性最优的方案：

fetch('/Documents/GenerateReportPdf', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => {
  const fileName = 'Report.pdf';
  // 拆分Data URL的MIME类型与Base64内容
  const [headerPart, base64Content] = data.url.split(',');
  const mimeType = headerPart.match(/:(.*?);/)[1];
  
  // 将Base64解码为二进制数据并创建Blob
  const byteChars = atob(base64Content);
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  const pdfBlob = new Blob([byteArray], { type: mimeType });

  // 创建下载链接并触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = window.URL.createObjectURL(pdfBlob);
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理资源，避免内存泄漏
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(downloadLink.href);
})
.catch(err => console.error(err));

建议优先使用方案二，它能覆盖绝大多数移动端浏览器的下载场景，包括iOS Safari这类对Data URL下载限制严格的环境。

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