Ionic Cordova应用中@awesome-cordova-plugins/in-app-browser无法下载PDF

1. 配置InAppBrowser并拦截下载请求 #

InAppBrowser默认不自动处理文件下载，需手动拦截下载链接，调用专门的文件下载插件完成操作：

import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
import { FileTransfer, FileTransferObject } from '@awesome-cordova-plugins/file-transfer/ngx';
import { File } from '@awesome-cordova-plugins/file/ngx';

constructor(private iab: InAppBrowser, private transfer: FileTransfer, private file: File) {}

openTargetPage() {
  // 初始化InAppBrowser并启用系统WebView
  const browser = this.iab.create('你的网页地址', '_blank', {
    location: 'yes',
    AndroidInAppBrowserWebView: 'true',
    AllowFileAccess: 'true',
    AllowUniversalAccessFromFileURLs: 'true'
  });

  // 监听页面加载事件，识别下载链接
  browser.on('loadstart').subscribe(event => {
    // 可根据实际文件后缀扩展匹配规则
    if (event.url.match(/\.(zip|pdf|apk|docx|xlsx)$/i)) {
      browser.close();
      this.handleFileDownload(event.url);
    }
  });
}

handleFileDownload(url: string) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  const fileName = url.split('/').pop();
  // 将文件保存到设备下载目录
  const savePath = this.file.externalRootDirectory + 'Download/' + fileName;

  fileTransfer.download(url, savePath).then(entry => {
    console.log('文件已保存至: ' + entry.toURL());
    // 可在此添加下载完成的提示逻辑
  }, error => {
    console.error('下载失败:', error);
  });
}

2. 配置Android权限与项目参数 #

在config.xml中添加必要权限和WebView配置：

<!-- 基础权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- Android 13+ 媒体权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

<platform name="android">
  <!-- 启用系统WebView以支持现代下载特性 -->
  <preference name="AndroidInAppBrowserWebView" value="true" />
  <!-- 允许WebView访问本地文件 -->
  <preference name="AllowFileAccess" value="true" />
  <preference name="AllowUniversalAccessFromFileURLs" value="true" />
</platform>

注意：Android 6+需动态申请存储权限，可通过@awesome-cordova-plugins/permission插件实现。

3. 处理网页JS触发的下载 #

若网页通过JavaScript动态生成下载链接（非直接跳转），需在网页中添加事件通知逻辑：
网页端代码：

document.querySelector('#download-btn').addEventListener('click', () => {
  const downloadUrl = '你的文件下载地址';
  // 判断当前是否在Cordova环境中
  if (window.Cordova) {
    // 向Cordova应用发送下载事件
    window.Cordova.fireDocumentEvent('downloadTrigger', { url: downloadUrl });
  }
});

应用端添加事件监听：

browser.on('message').subscribe(event => {
  if (event.data && event.data.url) {
    browser.close();
    this.handleFileDownload(event.data.url);
  }
});

4. 检查服务器响应头 #

确保服务器返回的下载链接包含正确的响应头，例如：
Content-Disposition: attachment; filename="目标文件名.pdf"
缺少该头可能导致InAppBrowser无法识别为下载请求。

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