Ionic Capacitor 应用中实现 PDF 文件预览的专业指南

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

npm install @capacitor/filesystem
npx cap sync

import { Component } from '@angular/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome-plugins/file-opener';
import { Platform } from '@ionic/angular'; // 用于判断平台

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

  constructor(private platform: Platform) {}

  async openPdf() {
    if (this.platform.is('hybrid')) { // 确保只在原生平台运行
      const pdfAssetPath = 'assets/documents/mizzica.pdf'; // 您的 PDF 文件路径

      try {
        // 1. 从 assets 目录读取 PDF 文件内容
        // 注意：在 Capacitor 中，直接通过文件路径读取 assets 目录下的文件需要特殊处理
        // 最常见的方法是通过 fetch API 读取，因为 assets 文件在打包后可通过 HTTP 路径访问
        const response = await fetch(pdfAssetPath);
        const blob = await response.blob();

        // 2. 将 Blob 转换为 Base64 字符串（Filesystem.writeFile 需要）
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = async () => {
          const base64data = reader.result as string;
          // 移除 Data URL 前缀，只保留 Base64 数据
          const base64Content = base64data.split(',')[1];

          // 3. 将 Base64 内容写入到设备的数据目录
          const fileName = 'mizzica.pdf';
          const filePath = `${Directory.Data}/${fileName}`;

          await Filesystem.writeFile({
            path: fileName,
            data: base64Content,
            directory: Directory.Data,
            encoding: Encoding.Base64,
            recursive: true // 确保父目录存在
          });

          // 4. 使用 FileOpener 插件打开复制的文件
          await FileOpener.open({
            path: filePath,
            mimeType: 'application/pdf',
          });

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

      } catch (error) {
        console.error('打开 PDF 失败:', error);
      }
    } else {
      console.warn('此功能仅在原生设备上可用。');
      // 可以在此处为 Web 平台提供替代方案，例如使用 iframe 或第三方 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()">打开 PDF</ion-button>
</ion-content>