IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示（後編）

C:\src\ionic\pdfdl>npm install ng2-pdfjs-viewer
npm WARN ng2-pdfjs-viewer@3.2.9 requires a peer of @angular/core@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ng2-pdfjs-viewer@3.2.9
added 1 package in 10.902s

C:\src\ionic\pdfdl>ionic g page pdf-viewer
> ng.cmd generate page pdf-viewer
CREATE src/app/pdf-viewer/pdf-viewer.module.ts (559 bytes)
CREATE src/app/pdf-viewer/pdf-viewer.page.html (129 bytes)
CREATE src/app/pdf-viewer/pdf-viewer.page.spec.ts (713 bytes)
CREATE src/app/pdf-viewer/pdf-viewer.page.ts (271 bytes)
CREATE src/app/pdf-viewer/pdf-viewer.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (536 bytes)
[OK] Generated page!

<ion-header>
    <ion-toolbar color="dark">
        <ion-title>pdf-viewer</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ng2-pdfjs-viewer #pdfViewer></ng2-pdfjs-viewer>
</ion-content>

import { Component, ViewChild } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";

@Component({
    selector: "app-pdf-viewer",
    templateUrl: "./pdf-viewer.page.html",
    styleUrls: ["./pdf-viewer.page.scss"]
})
export class PdfViewerPage {

    // ng2-pdf-viewer
    @ViewChild("pdfViewer") pdfViewer;

    // 表示するPDFのBlobデータ
    content;

    constructor(private route: ActivatedRoute) {
        // 遷移してきたHome画面からのPDFのBlobパラメータを取得
        route.queryParamMap.subscribe((params: ParamMap) => {
            this.content = this.route.snapshot.queryParamMap.get("content");
        });
    }

    // PDFビューワページが表示されたらPDFを表示
    ionViewDidEnter() {
        this.pdfViewer.pdfSrc = this.content;
        this.pdfViewer.refresh();
    }
}

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { Routes, RouterModule } from "@angular/router";

import { IonicModule } from "@ionic/angular";

import { PdfViewerPage } from "./pdf-viewer.page";
import { PdfJsViewerModule } from "ng2-pdfjs-viewer";　　← 追加

const routes: Routes = [
    {
        path: "",
        component: PdfViewerPage
    }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes),
        PdfJsViewerModule              ← 追加
    ],
    declarations: [PdfViewerPage]
})
export class PdfViewerPageModule {}

import { PdfViewerPage } from "../pdf-viewer/pdf-viewer.page";　← 追加

@Component({
    selector: "app-home",
    templateUrl: "home.page.html",
    styleUrls: ["home.page.scss"]
})
export class HomePage {

    (snip)

    // 追加
    public showPdf(content: Blob) {
        // PDFのBlobデータをパラメータにしてpdf-viewerに遷移
        this.navController.navigateForward("/pdf-viewer", {
            queryParams: { content: content }
        });
    }

    ionViewDidEnter() {
        // viewer.htmlのiframe
        let iframe = this.pdfViewer["iframe"].nativeElement;
        this.pdfViewer.pdfSrc = this.content;
        this.pdfViewer.refresh();

        // PDF読込完了
        iframe.onload = () => {
            // viewer.htmlのbody
            let iframeBody = iframe.contentWindow.document.body;

            // ピンチ操作記録オブジェクト
            let behavior = { ratio: 1, start: 0, end: 0 };

            // true : ピンチ操作中
            let active: boolean = false;

            // 二本指間の距離を算出
            let getDistance = function(e: TouchEvent) {
                return Math.sqrt(
                    Math.abs(
                        Math.pow(e.touches[0].pageX - e.touches[1].pageX, 2) -
                        Math.pow(e.touches[0].pageY - e.touches[1].pageY, 2)
                    )
                );
            };

            iframeBody.addEventListener(
                "touchstart",
                (e: TouchEvent) => {
                    // 二本指でタッチされたらピンチ方向検知開始
                    if (e.touches.length > 1) {
                        behavior.start = behavior.end = Math.round(
                            getDistance(e)
                        );
                        active = true;
                    }
                },
                false
            );

            iframeBody.addEventListener(
                "touchmove",
                (e: TouchEvent) => {
                    if (active && e.touches.length > 1) {
                        behavior.end = Math.round(getDistance(e));
                        behavior.ratio = behavior.end / behavior.start;
                    }
                },
                false
            );

            iframeBody.addEventListener(
                "touchend",
                (e: TouchEvent) => {
                    if (behavior.ratio < 1) {
                        // ピンチインはズームアウト
                        iframe.contentWindow.document
                            .querySelector("#zoomOut")
                            .click();
                    } else if (behavior.ratio > 1) {
                        // ピンチアウトはズームイン
                        iframe.contentWindow.document
                            .querySelector("#zoomIn")
                            .click();
                    }
                    console.log(behavior);
                    // ピンチ操作記録をクリア
                    behavior.start = behavior.end = 0;
                    behavior.ratio = 1;
                },
                false
            );
        };
    }

        iframe.onload = () => {
            var iframeBody = iframe.contentWindow.document.body;

            let hammer = new window['Hammer'](iframeBody);
            hammer.get('pinch').set({ enable: true });

            hammer.on("pinch", (event) => {
                if (event.type == 'pinch') {

                    if (event.additionalEvent == "pinchout" && event.eventType == 4) {
                        iframe.contentWindow.document.querySelector("#zoomIn").click();
                    }

                    if (event.additionalEvent == "pinchin" && event.eventType == 4) {
                        iframe.contentWindow.document.querySelector("#zoomOut").click();
                    }
                }
            });
        }