Ionic 6+Capacitor Android端PDF/JPG无法在浏览器打开问题求助

问题根源 #

1. iOS的WKWebView（Capacitor默认使用）对data URI直接嵌入iframe的支持存在限制，大文件会直接加载失败
2. window.open在iOS中受弹窗拦截策略影响，新窗口内的document.write操作可能被安全机制阻止
3. 对base64编码内容调用encodeURI属于多余操作，会破坏原始编码格式导致文件无法解析

解决步骤 #

1. 安装依赖插件

使用Capacitor官方的Filesystem和Browser插件处理本地文件写入与打开：

npm install @capacitor/filesystem @capacitor/browser
npx cap sync ios

2. 修改openAttachments方法

替换原有的iframe打开逻辑，改为先将base64内容写入本地文件，再通过Browser插件打开：

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Browser } from '@capacitor/browser';

async openAttachments(attachment: UserAttachmentDTO) {
  if (attachment.AttachmentType == AttachmentType.LINK) {
    await Browser.open({ url: attachment.FilePath, windowName: '_blank' });
    return;
  }

  if (attachment.UserAttachmentType == UserAttachmentTypeEnum.DICOM || attachment.FileExtension.toLowerCase().includes("dcm")) {
    this.openDicomAttachment(attachment);
    return;
  }

  if (!attachment.FileDataBase64 || !attachment.FileContentType) {
    const attachFromServer: AttachmentDTO = await this.attachmentService.getByID(attachment.FK_Attachment);
    attachment.FileDataBase64 = attachFromServer.FileDataBase64;
    attachment.FileContentType = attachFromServer.FileContentType;
  }

  const extension = attachment.FileExtension.toLowerCase();
  const supportedInlineTypes = ["pdf", "png", "jpg", "txt", "rtf"];

  if (supportedInlineTypes.includes(extension)) {
    try {
      // 将base64内容写入本地文件
      const fileName = `${attachment.FileName}.${extension}`;
      await Filesystem.writeFile({
        path: fileName,
        data: attachment.FileDataBase64,
        directory: Directory.Documents,
        encoding: Encoding.Base64
      });

      // 获取本地文件的可访问URL
      const fileUrl = await Filesystem.getUri({
        path: fileName,
        directory: Directory.Documents
      });

      // 调用Browser插件打开文件
      await Browser.open({ url: fileUrl.uri, windowName: '_blank' });
    } catch (error) {
      console.error('打开文件失败:', error);
      // 失败时 fallback 到下载逻辑
      this.downloadAttachment(attachment);
    }
  } else {
    this.downloadAttachment(attachment);
  }
}

// 提取下载逻辑为单独方法
private downloadAttachment(attachment: UserAttachmentDTO) {
  const source = `data:${attachment.FileContentType};base64,${attachment.FileDataBase64}`;
  const link = document.createElement("a");
  link.href = source;
  link.download = `${attachment.FileName}.${attachment.FileExtension}`;
  link.click();
}

关键说明 #

• Filesystem插件：将base64内容写入应用的Documents目录，确保文件能被安全访问
• Browser插件：Capacitor官方跨平台浏览器API，规避iOS Safari的弹窗拦截和data URI限制
• 移除encodeURI：直接使用原始base64内容写入文件，避免编码破坏导致文件无法解析
• 异常处理：写入或打开失败时自动切换到下载逻辑，保证用户体验

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