Ionic, Capacitor, AngularでPDFの表示方法 ~ 6選 ~

こんにちは。「新田いおり」と言います。

今回はIonic,CapacitorとAngularを使用してPDFの表示方法を6選紹介していきます。

Github: https://github.com/NittaIori/IonicPdf

※この記事の内容の見た目や使いやすさの判定は自分の勝手な判断です。動画を載せていますので、それを参考にしたり自分の環境で試して見てください。

検証・動作環境

  • MacBookPro MacOS13
  • Ionic 7.0.0
  • Capacitor 5.0.3
  • Angular 16.0.0
  • iPhone(Simulator) 14 Pro Max iOS 16.4

それぞれの見た目と感想・条件

早速ですが、それぞれの見た目と感想を表示します。これを見てから、自分が使用したいものを使用するといいと思います。

ng2-pdf-viewerとngx-extended-pdf-viewerはAngularのモジュールなので、Webアプリを作成を作成する場合でも使用する事ができます。Webアプリとネイティブアプリのソースコードを統一する場合は使用するのをお勧めします。

見た目

動画の左から順に「CapacitorBrowser, InAppBrowser, FileOpener, DocumentViewer, ng2-pdf-viewer, ngx-extended-pdf-viewer」の順番です。みづらくて申し訳ないです。

また、動画では標準的なオプションのみ使用しています。個々のオプションなどはそれぞれの公式ページを参考にしてください。

感想・条件 ※見た目と使いやすさは個人的意見です。

※ローカルに◯があるものはインターネットがXでもダウンロードして表示することもできます。下記よりダウンロードの仕方も載せてあります。

プラグイン・モジュール/感想・条件Capacitor BrowserInApp BrowserFile OpenerDocument Viewerng2-pdf-viewerngx-extended-pdf-viewer
インターネットXX△(CORSの制限あり)△(CORSの制限あり)
ローカルXX
見た目◯(色々Optionがある)△(あまり好きではない)
使いやすさ△(2本指でのズームができない?)

CapacitorでのPDFのダウンロード方法

上記でインターネットの使用ができないが、ローカルの使用ができるものがあり、それらは、ローカルにダウンロードし、そのファイルを表示するという方法をすると、インターネットのPDFも表示する事が可能です。ので、CapacitorでローカルにPDFをダウンロードする方法を記しておきます。

CapacitorCommunityHttpCapacitorFilesystemのインストール

npm install @capacitor-community/http
npm install @capacitor/filesystem
ionic capacitor sync

※Filesystem実行の際、iosとAndroidで設定するファイルがあります。

iOSではinfo.plist

  • UIFileSharingEnabledApplication supports iTunes file sharing)
  • LSSupportsOpeningDocumentsInPlaceSupports opening documents in place)

AndroidではAndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

の追加が必要です。詳しくは公式のサイトの環境設定を参考にしてください。

コード

import { Http, HttpDownloadFileOptions, HttpDownloadFileResult } from '@capacitor-community/http';
import { Filesystem, Directory } from '@capacitor/filesystem';

async function download() {
  const pdf_url = 'https://nittaiori.github.io/IonicPdf/pdf_test.pdf';
  const options: HttpDownloadFileOptions = {
    url: pdf_url,
    filePath: 'document.pdf',
    fileDirectory: Directory.Documents,
    method: 'GET',
  };

  const response: HttpDownloadFileResult = await Http.downloadFile(options);
  console.log(response.path);
}

それぞれの実装方法

CapacitorBrowser

CapacitorBrowserのインストール

※ CapacitorBrowserはIonicプロジェクト作成時にインストールされている場合があるのでインストールされている方は必要ないです。

npm install @capacitor/browser
ionic capacitor sync

コード

import { Browser } from '@capacitor/browser';

// *** 省略
export class Page {
  constructor() {}

  async onClickCapacitorBrowser() {
    const pdf_url = 'https://nittaiori.github.io/IonicPdf/pdf_test.pdf';
    const options = {
      url: pdf_url,
    };
    await Browser.open(options)
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

InAppBrowser

InAppBrowserのインストール

npm install cordova-plugin-inappbrowser 
npm install @awesome-cordova-plugins/in-app-browser 
ionic capacitor sync

app.module.tsにInAppBrowserを追加

// *** 省略
import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

// *** 省略
@NgModule({
  // *** 省略
  providers: [
    // *** 省略
    InAppBrowser, // 追加
  ],
  // *** 省略
})
// *** 省略

コード

import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

// *** 省略
export class Page {
  constructor(
    private iab: InAppBrowser,
  ) {}

  onClickInAppBrowser() {
    const pdf_url = 'https://nittaiori.github.io/IonicPdf/pdf_test.pdf';
    this.iab.create(pdf_url, "_blank", "toolbarposition=top");
  }
}

FileOpener

FileOpenerのインストール

npm install cordova-plugin-file-opener2 
npm install @awesome-cordova-plugins/file-opener 
ionic capacitor sync

app.module.tsにFileOpenerを追加

// *** 省略
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';

// *** 省略
@NgModule({
  // *** 省略
  providers: [
    // *** 省略
    FileOpener, // 追加
  ],
  // *** 省略
})
// *** 省略

コード

import { Filesystem, Directory } from '@capacitor/filesystem';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';

// *** 省略
export class Page {
  constructor(
    private fileOpener: FileOpener,
  ) {}

  async onClickFileOpener() {
    const local_url = await Filesystem.getUri({
      path: 'document.pdf',
      directory: Directory.Documents
    });

    if (local_url.uri) {
      this.fileOpener.open(local_url.uri, 'application/pdf');
    }
  }
}

DocumentViewer

DocumentViewerのインストール

npm install cordova-plugin-document-viewer 
npm install @awesome-cordova-plugins/document-viewer 
ionic capacitor sync

app.module.tsにDocumentViewerの追加

// *** 省略
import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx';

// *** 省略
@NgModule({
  // *** 省略
  providers: [
    // *** 省略
    DocumentViewer, // 追加
  ],
  // *** 省略
})
// *** 省略

コード

import { Filesystem, Directory } from '@capacitor/filesystem';
import { DocumentViewer, DocumentViewerOptions } from '@awesome-cordova-plugins/document-viewer/ngx';

// *** 省略
export class Page {
  constructor(
    private documentViewer: DocumentViewer,
  ) {}

  async onClickDocumentViewer() {
    const local_url = await Filesystem.getUri({
      path: 'document.pdf',
      directory: Directory.Documents
    });

    if (local_url.uri) {
      const document_options: DocumentViewerOptions = {
        title: "TestPdf",
      };
      this.documentViewer.viewDocument(local_url.uri, 'application/pdf', document_options);
    }
  }
}

ng2-pdf-viewer

ng2-pdf-viewerのインストール

npm install ng2-pdf-viewer
ionic capacitor sync

module.tsにng2-pdf-viewerの追加

// *** 省略
import { PdfViewerModule } from 'ng2-pdf-viewer';

// *** 省略
@NgModule({
  // *** 省略
  imports: [
    // *** 省略
    Tab2PageRoutingModule, // 追加
  ],
  // *** 省略
})
// *** 省略

コード

<pdf-viewer
  [src]="url"
  [render-text]="true"
  [original-size]="false"
  style="width: 400px; height: 500px"
></pdf-viewer>

<!-- ローカルから使用する場合 -->
<pdf-viewer
  [src]="dataUrl"
  [render-text]="true"
  [original-size]="false"
  style="width: 400px; height: 500px"
></pdf-viewer>
import { Filesystem, Directory } from '@capacitor/filesystem';

// *** 省略
export class Page {
  url = 'https://nittaiori.github.io/IonicPdf/pdf_test.pdf';
  dataUrl = '';

  constructor() {
    this.loadLocal();
  }

  async loadLocal() {
    const data = await Filesystem.readFile({
      path: 'document.pdf',
      directory: Directory.Documents,
    });
    this.dataUrl = 'data:application/pdf;base64,' + data.data;
  }
}

ngx-extended-pdf-viewer

ngx-extended-pdf-viewerのインストール

npm install ngx-extended-pdf-viewer

パブリックの設定(angular.jsonファイルの編集) 下記のassetsの中を追加

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                "output": "/assets/"
              }
            ],
          },
        },
      },
    },
  },
}

module.tsにngx-extended-pdf-viewerの追加

// *** 省略
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';

// *** 省略
@NgModule({
  // *** 省略
  imports: [
    // *** 省略
    NgxExtendedPdfViewerModule, // 追加
  ],
  // *** 省略
})
// *** 省略

コード

<ngx-extended-pdf-viewer
  [src]="url"
></ngx-extended-pdf-viewer>

<!-- ローカルから使用する場合 -->
<ngx-extended-pdf-viewer
  [base64Src]="base64"
></ngx-extended-pdf-viewer>
import { Filesystem, Directory } from '@capacitor/filesystem';

// *** 省略
export class Page {
  url = 'https://nittaiori.github.io/IonicPdf/pdf_test.pdf';
  base64 = '';

  constructor() {
    this.loadLocal();
  }

  async loadLocal() {
    const data = await Filesystem.readFile({
      path: 'document.pdf',
      directory: Directory.Documents,
    });
    this.base64 = data.data;
  }
}

感想

ここまで、読んでいただきありがとうございます。

今回はIonic, CapacitorとAngularを使用したPDFの表示方法の解説でした。

少しでも、皆さんの開発のお手伝いができたらいいなと思い作成しています。

また今日から英語対応のページも同時に作成していこうと思います。(前回の記事が意外と外国人さんの閲覧者が多かったので、、)

何かミス等ありましたら、コメントかTwitterの方で教えて頂けるととても助かります。

今後ともよろしくお願いします。

コメントする