@capacitor/filesystem, jsPDF 이용시, 앱에서 pdf 생성 안되는 오류

개요: 하이브리드 앱을 제작하며, 앱에서 @capacitor/filesystem 플러그인을 사용하였지만, jsPDF로 제작 한 pdf가 안열리는 오류가 생겼다.

---

문제점: 웹에선, jsPDF로 생성한 doc중 blob 형태의 데이터를 넘겨받아 pdf를 생성시킨다. 하지만 앱에선 blob 이 아닌 string형태로만 데이터를 받아 pdf를 제작할 수 있다는점! (@capacitor/filesystem 한정)

 

그렇다면 앱에선 jsPDF로 그림 및 그래프를 생성할 수 없나? => 아니오

 

blob 형태의 데이터를 string 형태로 인코딩 한 뒤, 인자값으로 넘겨주면, 앱 형태에서도 그래프나 그림을 제작 할 수 있다!

---

예시

// pdf 데이터를 doc 변수에 할당
doc = this.makeTable();

// 비동기로 처리하여 pdf 제작 최적화
setTimeout(() => {
    const blobPDF = doc.output('blob');	//blob 형태의 데이터를 꺼낸후
    this.blobToBase64(blobPDF) // blob을 string 형태로 인코딩
        .then(base64String => {
          this.filesystemService.writeFile({pdf파일명}, base64String) // 파일명, 데이터를 넣고 제작
            .then(response => {
              this.fileOpenerService.open(response.nativeURL, 'application/pdf'); // 제작이 완료되면 fileOpener를 이용하여 열어줌
            });
        })
        .catch(error => {
          console.error('Error converting blob to base64:', error);
        });
    }, 1000); //1초

// blob 을 받아, string형태로 인코딩하는 코드
  private blobToBase64(blob: Blob): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const result = reader.result as string; // reader.result를 string으로 캐스팅
        const base64String = result.split(",")[1];
        resolve(base64String);
      };
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
  }

 

//writeFile 함수 정의  

import { Injectable } from '@angular/core';
import { Directory, Encoding, Filesystem } from '@capacitor/filesystem';

@Injectable({
  providedIn: 'root'
})
export class NgFilesystemService {
  async writeFile(filename: string, blobPDF: any): Promise<{ nativeURL: string }> {
    const result = await Filesystem.writeFile({
      path: filename,
      data: blobPDF,
      directory: Directory.Data,
    });

    return { nativeURL: result.uri };
  }
}

 

 

// open 함수 정의

import { Injectable } from '@angular/core';
import { FileOpener } from '@capawesome-team/capacitor-file-opener';

@Injectable({
  providedIn: 'root'
})
export class NgFileOpenerService {
  open(path: string, mimeType?: string): Promise<void> {
    return FileOpener.openFile({ path, mimeType });
  }
}

 

출처: https://capacitorjs.com/docs/apis/filesystem#writefileoptions