在Ionic Capacitor应用中打开PDF文件

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

import { Component, OnInit } from '@angular/core';
import { FileOpener } from '@capawesome-plugins/file-opener'; // 导入 Capacitor 文件打开插件
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; // 导入 Capacitor 文件系统插件
import { Platform } from '@ionic/angular'; // 用于判断运行平台

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

  constructor(private platform: Platform) { }

  ngOnInit() {
    // 确保在 Capacitor 环境下运行，否则文件系统操作可能无效
    if (!this.platform.is('capacitor')) {
      console.warn('此功能仅在 Capacitor 环境中可用。');
    }
  }

  /**
   * 将 asset 目录下的文件复制到设备可访问的临时目录
   * @param assetPath asset 目录下的相对路径，例如 'documents/mizzica.pdf'
   * @param fileName 目标文件名，例如 'mizzica.pdf'
   * @returns Promise<string> 返回复制后文件的完整路径
   */
  private async copyAssetFile(assetPath: string, fileName: string): Promise<string> {
    try {
      // 1. 读取 asset 文件内容为 blob
      const response = await fetch(`/assets/${assetPath}`);
      const blob = await response.blob();

      // 2. 将 blob 转换为 base64 字符串
      const base64Data = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => {
          resolve(reader.result as string);
        };
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      });

      // 移除 base64 前缀，例如 "data:application/pdf;base64,"
      const base64Content = base64Data.split(',')[1];

      // 3. 将 base64 内容写入设备的文件系统
      const result = await Filesystem.writeFile({
        path: fileName,
        data: base64Content,
        directory: Directory.Data, // 或 Directory.Cache
        encoding: Encoding.Base64,
        recursive: true, // 如果目录不存在则创建
      });

      // 4. 返回写入文件的完整路径
      return result.uri;

    } catch (e) {
      console.error('复制 asset 文件失败:', e);
      throw e; // 重新抛出错误以便上层捕获
    }
  }

  /**
   * 打开 PDF 文件
   */
  async openPdf() {
    if (!this.platform.is('capacitor')) {
      alert('PDF 打开功能仅在移动设备上可用。');
      return;
    }

    const assetRelativePath = 'documents/mizzica.pdf'; // assets 目录下的相对路径
    const targetFileName = 'mizzica.pdf'; // 复制到设备后的文件名

    try {
      // 1. 将 asset 中的 PDF 复制到设备文件系统
      const filePath = await this.copyAssetFile(assetRelativePath, targetFileName);
      console.log('PDF 文件已复制到:', filePath);

      // 2. 使用 Capacitor 文件打开插件打开文件
      await FileOpener.open({
        path: filePath,
        contentType: 'application/pdf',
      });
      console.log('PDF 文件已打开');

    } catch (e) {
      console.error('打开 PDF 文件失败:', e);
      alert('无法打开 PDF 文件。请检查文件是否存在或应用权限。');
    }
  }
}

<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()">Apri PDF</ion-button>
</ion-content>