5

最近、Ionic 4 Angular アプリを Web アプリとネイティブ Android アプリの両方として公開しました。
ネイティブの Android アプリでは、ダウンロードしたファイルの保存を除いて、すべて正常に動作します。

ファイルをダウンロードして保存するために、私は常にfile-saver次のように npm パッケージを使用してきました (これは、PDF から画像などに何かをダウンロードする必要があるたびに呼び出す共有サービスです...)。

import { saveAs } from 'file-saver';

// ...

saveGenericFile(api: string, fileinfos: any, idFile: string): any {
    let mediaType = 'application/pdf';
    let fileName = '';

    if (fileinfos != null) {
      mediaType = fileinfos.contentType;
      fileName = fileinfos.fileName;
    }

    const headers = this.base.commonHeader;
    const url = this.baseUrl + api + '?id=' + idFile;
    this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
      (response) => {
        // tslint:disable-next-line: prefer-const
        let blob = new Blob([response], { type: mediaType });
        saveAs(blob, fileName);
      }, e => {
        console.error(e);
        this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
      }, () => {
        /* do nothing */
      }
    );
  }

上で述べたように、このコード スニペットは問題なく動作しますが、Web リリースから何かを保存する必要がある場合だけです。

私が見つけた唯一のオンラインの例は、Cordova および/または以前の/非推奨のバージョンに関するものでした。
Capacitor については、このドキュメントを見つけたところから、このコード スニペットを見つけました。

import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';

const { Filesystem } = Plugins;

fileWrite() {
  try {
    Filesystem.writeFile({
      path: 'secrets/text.txt',
      data: "This is a test",
      directory: FilesystemDirectory.Documents,
      encoding: FilesystemEncoding.UTF8
    });
  } catch(e) {
    console.error('Unable to write file', e);
  }
}

しかし、問題は、上記の関数が blob を返し、これはデータの文字列のみを受け入れることです。

それで、Webアプリとして実行しているときとAndroidネイティブアプリとして実行しているときの両方でBlobファイルをダウンロード（および保存）するために使用できるCapacitor-Native同等の機能はありますか?

アップデート

また、次のことも試しましたが、うまくいきません。

saveGenericFile(api: string, fileinfos: any, gidFile: string): any {
    let mediaType = 'application/pdf';
    let fileName = '';

    if (fileinfos != null) {
      mediaType = fileinfos.contentType;
      fileName = fileinfos.fileName;
    }

    const headers = this.base.commonHeader;
    const url = this.baseUrl + api + '?id=' + gidFile;
    this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
      (response) => {
        if (!this.useCordovaDl) {
          // tslint:disable-next-line: prefer-const
          let blob = new Blob([response], { type: mediaType });
          saveAs(blob, fileName);
        } else {
          this.blobFileWrite(fileName, response);
        }
      }, e => {
        console.error(e);
        this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
      }, () => {
        /* do nothing */
      }
    );
  }

  blobFileWrite(filename: string, blobfile: Blob) {
    const reader = new FileReader();

    // This fires after the blob has been read/loaded.
    reader.addEventListener('loadend', (e: any) => {
      const text = e.srcElement.result;
      this.fileWrite(filename, text);
    });

    // Start reading the blob as text.
    reader.readAsText(blobfile);
  }

  fileWrite(filename: string, filedata: string) {
    try {
      Filesystem.writeFile({
        path: filename,
        data: filedata
        // ,
        // directory: FilesystemDirectory.Documents,
        // encoding: FilesystemEncoding.UTF8
      });
    } catch (e) {
      console.error('Unable to write file', e);
    }
  }

更新 #2

Capacitor を使用した Blob データの保存に関する未解決の問題が GitHub にまだあるようです。その間、Cordova ソリューションを探します。または、プラットフォームが android または ios の場合は、すべてのダウンロード ボタンを無効にします。
機能するすべての Cordova 回避策をここに投稿します。

4

3 に答える 3

1

URL を渡してネイティブにダウンロードできるプラグインを作成することもできます。すでにわかっているように、ブロブ/ファイルを渡すことはまだ不可能です。

利用可能なプラグインがない場合、またはプラグインを作成したくない場合。URL などの側でjsリッスンできるネイティブ関数を呼び出すことができます。native

于 2019-07-02T21:56:24.993 に答える