在Ionic Capacitor应用中正确打开本地PDF文件教程

npm install @capacitor/filesystem @capawesome/capacitor-file-opener
npx cap sync

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ... 其他权限 ... -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 对于Android 10+，如果仅操作应用私有目录，可能不需要这些权限 -->
    <!-- 如果需要向外部共享文件，可能还需要在application标签下添加FileProvider -->
    <application
        android:requestLegacyExternalStorage="true"> <!-- 仅在Android 9及以下版本可能需要 -->
        <!-- ... -->
    </application>
</manifest>

// src/app/services/pdf-viewer.service.ts
import { Injectable } from '@angular/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome/capacitor-file-opener';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class PdfViewerService {

  constructor(private platform: Platform) { }

  /**
   * 从assets目录读取PDF文件并复制到应用数据目录，然后打开。
   * @param assetPath PDF文件在assets目录下的路径，例如 'documents/mizzica.pdf'
   * @param fileName 复制到设备后的文件名，例如 'mizzica.pdf'
   */
  async openPdfFromAssets(assetPath: string, fileName: string): Promise<void> {
    if (!this.platform.is('capacitor')) {
      console.warn('此功能仅在Capacitor环境中可用。');
      // 可选：在浏览器中处理，例如打开新标签页显示PDF
      window.open(assetPath, '_blank');
      return;
    }

    try {
      // 1. 读取assets目录中的文件
      // 对于assets目录下的文件，Capacitor的Filesystem插件无法直接读取。
      // 我们需要通过HTTP请求（或fetch API）来获取这些文件。
      const response = await fetch(assetPath);
      const blob = await response.blob();

      // 2. 将Blob数据写入设备文件系统
      // 创建一个文件阅读器来读取Blob数据为Base64字符串
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      await new Promise<void>((resolve, reject) => {
        reader.onloadend = async () => {
          const base64Data = reader.result as string;
          // 移除Base64数据头，只保留实际数据
          const base64Content = base64Data.split(',')[1];

          // 将Base64数据写入到应用的数据目录
          const filePath = `${Directory.Data}/${fileName}`;
          await Filesystem.writeFile({
            path: fileName, // 文件名
            data: base64Content,
            directory: Directory.Data, // 写入应用数据目录
            recursive: true // 如果目录不存在则创建
          });

          // 3. 使用FileOpener插件打开文件
          await FileOpener.open({
            filePath: filePath,
            contentType: 'application/pdf',
            openWithDefault: true // 尝试使用默认应用打开
          });

          console.log('PDF文件已成功打开');
          resolve();
        };
        reader.onerror = (e) => {
          console.error('读取Blob数据失败:', e);
          reject(e);
        };
      });

    } catch (e) {
      console.error('打开PDF文件时发生错误:', e);
      // 可以根据错误类型提供更友好的用户提示
      if (e.message.includes('No app found to open file')) {
        alert('未找到可打开PDF的应用程序。');
      } else {
        alert('无法打开PDF文件，请稍后再试。');
      }
    }
  }
}

// src/app/open-pdf/open-pdf.page.ts
import { Component, OnInit } from '@angular/core';
import { PdfViewerService } from '../services/pdf-viewer.service'; // 导入您的服务

@Component({
  selector: 'app-open-pdf',
  templateUrl: './open-pdf.page.html',
  styleUrls: ['./open-pdf.page.scss'],
})
export class OpenPdfPage implements OnInit {

  constructor(private pdfViewerService: PdfViewerService) { }

  ngOnInit() {
    // 可以在这里进行初始化操作
  }

  async openPdf() {
    // 调用服务方法来打开PDF
    // 注意：这里的路径是相对于应用的根目录，即 'assets/documents/mizzica.pdf'
    // 复制到设备后的文件名可以保持一致或自定义
    await this.pdfViewerService.openPdfFromAssets('assets/documents/mizzica.pdf', 'mizzica.pdf');
  }
}

<!-- src/app/open-pdf/open-pdf.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>打开PDF</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">打开PDF</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-button (click)="openPdf()">打开PDF</ion-button>
</ion-content>