使用 Capacitor 在 Ionic 应用中打开 PDF 文件

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

import { Component, OnInit } from '@angular/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome/capacitor-file-opener';
import { Platform } from '@ionic/angular'; // 用于判断平台，可能需要调整文件路径
import { HttpClient } from '@angular/common/http'; // 用于从 assets 读取文件

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule // 添加 HttpClientModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component, OnInit } from '@angular/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome/capacitor-file-opener';
import { Platform } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';

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

  constructor(
    private platform: Platform,
    private http: HttpClient // 注入 HttpClient
  ) { }

  ngOnInit() {
    // 确保 Capacitor 插件已初始化，通常在应用启动时自动完成
  }

  async openPdf() {
    const pdfUrl = '/assets/documents/mizzica.pdf'; // PDF 在 assets 目录下的路径
    const fileName = 'mizzica.pdf'; // 目标文件名
    const mimeType = 'application/pdf';

    if (!this.platform.is('capacitor')) {
      console.warn('此功能仅在 Capacitor 环境下可用。');
      // 可以选择在浏览器中直接打开链接，但可能不适用于所有PDF
      window.open(pdfUrl, '_blank');
      return;
    }

    try {
      // 1. 从 assets 获取 PDF 内容
      const response = await this.http.get(pdfUrl, { responseType: 'blob' }).toPromise();
      if (!response) {
        throw new Error('无法获取 PDF 文件内容。');
      }

      // 2. 将 Blob 数据写入设备文件系统
      // Filesystem.writeFile 需要 base64 编码的字符串，所以我们需要先将 Blob 转换为 base64
      const base64Data = await this.convertBlobToBase64(response);

      // 定义文件写入路径
      // 使用 Directory.Cache 目录，它适合存储临时文件，系统可能会清理
      const result = await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Cache,
        recursive: true // 如果目录不存在则创建
      });

      // 获取写入文件的完整 URI
      const filePath = result.uri;
      console.log('文件已写入:', filePath);

      // 3. 使用 FileOpener 插件打开文件
      await FileOpener.open({
        path: filePath,
        contentType: mimeType,
      });

      console.log('PDF 文件已成功打开');

    } catch (e) {
      console.error('打开 PDF 文件时发生错误:', e);
      // 根据需要显示用户友好的错误消息
    }
  }

  // 辅助函数：将 Blob 转换为 Base64 字符串
  private convertBlobToBase64(blob: Blob): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onerror = reject;
      reader.onload = () => {
        // FileReader result 包含 "data:application/pdf;base64,..."
        // 我们只需要 base64 部分
        const dataUrl = reader.result as string;
        resolve(dataUrl.split(',')[1]);
      };
      reader.readAsDataURL(blob);
    });
  }
}

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>openPdf</ion-title>
  </ion-toolbar>
</ion-header>

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