Ionic开发安卓/iOS应用：InAppBrowser打开外部链接无法下载PDF求助

要解决InAppBrowser中点击PDF下载链接无响应的问题，核心是拦截下载请求，手动处理文件下载并调用原生PDF查看器打开。以下是完整实现步骤：

1. 安装必要插件 #

先确保安装InAppBrowser、文件操作和文件打开的相关插件：

# InAppBrowser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

# 文件操作插件
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

# 文件打开插件
ionic cordova plugin add cordova-plugin-file-opener2
npm install @ionic-native/file-opener

2. 核心代码实现 #

在需要打开外部网站的组件中编写如下代码，拦截PDF下载请求并处理：

import { Component } from '@angular/core';
import { InAppBrowser, InAppBrowserEvent } from '@ionic-native/in-app-browser/ngx';
import { File } from '@ionic-native/file/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private iab: InAppBrowser,
    private file: File,
    private fileOpener: FileOpener,
    private platform: Platform
  ) {}

  openExternalSite() {
    // 打开外部网站，配置工具栏和地址栏可见
    const browser = this.iab.create('https://your-external-site-url.com', '_blank', {
      location: 'yes',
      toolbar: 'yes',
      allowInlineMediaPlayback: 'yes'
    });

    // 监听页面加载事件，拦截PDF下载链接
    browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
      // 判断当前URL是否为PDF文件（可根据实际情况调整匹配规则）
      if (event.url.match(/\.pdf$/i)) {
        browser.close(); // 关闭InAppBrowser，避免重复加载
        this.downloadAndOpenPDF(event.url);
      }
    });
  }

  async downloadAndOpenPDF(pdfUrl: string) {
    try {
      const fileName = pdfUrl.split('/').pop() || 'downloaded.pdf';
      let savePath: string;

      // 根据平台确定文件存储路径
      if (this.platform.is('android')) {
        // Android使用外部数据目录，无需额外权限（Android 10+）
        savePath = this.file.externalDataDirectory;
      } else if (this.platform.is('ios')) {
        // iOS使用Documents目录
        savePath = this.file.documentsDirectory;
      } else {
        throw new Error('当前平台不支持');
      }

      // 发起下载请求获取Blob
      const response = await fetch(pdfUrl);
      const pdfBlob = await response.blob();

      // 将Blob写入本地文件
      await this.file.writeFile(savePath, fileName, pdfBlob, { replace: true });

      // 调用原生PDF查看器打开文件
      await this.fileOpener.open(`${savePath}${fileName}`, 'application/pdf');
    } catch (error) {
      console.error('PDF下载/打开失败:', error);
      // 这里可添加Toast提示用户失败信息
    }
  }
}

3. 平台专属配置 #

Android 端配置 #

• 在platforms/android/app/src/main/AndroidManifest.xml中添加权限（Android 9及以下需要）：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

• 针对Android 10+，在<application>标签中添加兼容属性：

<application
  ...
  android:requestLegacyExternalStorage="true">

iOS 端配置 #

• 在platforms/ios/[你的App名称]/Info.plist中添加权限描述：

<key>NSDocumentsFolderUsageDescription</key>
<string>需要访问Documents文件夹保存下载的PDF文件</string>
<key>NSDownloadsFolderUsageDescription</key>
<string>需要访问Downloads文件夹保存下载的PDF文件</string>

• 如果目标网站使用HTTP协议（非HTTPS），需要添加ATS例外：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

注意事项 #

• 确保PDF下载链接是直接指向文件的，若存在重定向，需在loadstart事件中跟踪最终的文件URL
• 必须在真实设备上测试，模拟器可能存在权限或文件系统的兼容性问题
• 若遇到权限错误，可使用@ionic-native/permissions插件主动请求存储权限

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