WebView中JavaScript实现Blob下载功能失效问题求助

我有一个需同时支持WebView与浏览器的React应用，功能需求为将API返回的base64String转换为PDF并提供下载链接。当前实现代码如下：

const convertBase64StringToPDF = (data: string) => {
  const byteCharacters = atob(data);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: 'application/pdf' });
};

getbase64StringData(baseUrl2)
  .then((response) => {
    const blob = convertBase64StringToPDF(response.foobar);
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'MyDoc' + new Date() + '.pdf';
    link.click();
  })

目前遇到的问题是：仅在WebView环境中，点击创建的下载链接无法触发下载。无法控制嵌入WebView的App代码，希望在React/JavaScript应用层面解决，只需触发下载并保存到用户设备即可，不限制存储位置。

解决方案 #

方案1：直接使用base64数据URI替代Blob URL #

WebView对Blob URL的支持可能有限，直接将base64转为数据URI可以绕过这个限制：

const getDownloadLinkFromBase64 = (base64Data: string, filename: string) => {
  const dataUri = `data:application/pdf;base64,${base64Data}`;
  const link = document.createElement('a');
  link.href = dataUri;
  link.download = filename;
  // 添加到DOM确保WebView能识别点击事件
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 使用示例
getbase64StringData(baseUrl2)
  .then((response) => {
    const filename = `MyDoc${new Date().toISOString().slice(0, 10)}.pdf`;
    getDownloadLinkFromBase64(response.foobar, filename);
  });

方案2：利用iframe触发下载 #

有些WebView对a.click()的支持不完善，通过iframe加载Blob可以触发下载行为：

const downloadBlobViaIframe = (blob: Blob, filename: string) => {
  const url = window.URL.createObjectURL(blob);
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  // 部分WebView支持通过iframe的download属性指定文件名
  iframe.setAttribute('download', filename);
  document.body.appendChild(iframe);
  
  // 加载完成后清理资源，防止内存泄漏
  iframe.onload = () => {
    setTimeout(() => {
      document.body.removeChild(iframe);
      window.URL.revokeObjectURL(url);
    }, 100);
  };
};

// 使用示例
getbase64StringData(baseUrl2)
  .then((response) => {
    const blob = convertBase64StringToPDF(response.foobar);
    const filename = `MyDoc${new Date().toISOString().slice(0, 10)}.pdf`;
    downloadBlobViaIframe(blob, filename);
  });

方案3：结合FileReader转DataURI（兼容旧WebView） #

如果WebView对Blob的支持较差，用FileReader把Blob转回DataURI再触发下载：

const downloadPDF = (base64Data: string, filename: string) => {
  const reader = new FileReader();
  const blob = convertBase64StringToPDF(base64Data);
  
  reader.onload = (e) => {
    const dataUri = e.target?.result as string;
    const link = document.createElement('a');
    link.href = dataUri;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  
  reader.readAsDataURL(blob);
};

// 使用示例
getbase64StringData(baseUrl2)
  .then((response) => {
    const filename = `MyDoc${new Date().toISOString().slice(0, 10)}.pdf`;
    downloadPDF(response.foobar, filename);
  });

关键注意事项 #

• 文件名避免特殊字符和过长，部分WebView对文件名有格式限制
• 用toISOString()格式化日期，避免空格、斜杠等字符导致下载失败
• 操作完成后及时移除DOM元素并释放Blob URL，防止内存泄漏

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