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 */
      }
    );
  }

正如我上面所说，这个代码片段工作正常，但只是当我必须从网络版本中保存一些东西时。

我能找到的唯一在线示例都是关于 Cordova 和/或以前/已弃用的版本。
关于电容器，我刚刚找到了这个文档，并从中找到了这个代码片段：

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 本机应用程序运行时，是否有任何 Capacitor-Native 等效功能可用于下载（和保存）Blob 文件？

更新

我也尝试了以下方法，但它不起作用：

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

看起来GitHub 上仍有一个关于使用电容器保存 Blob 数据的未解决问题。同时，我将寻找 Cordova 解决方案。或者，如果平台是 android 或 ios，我将简单地禁用每个下载按钮。
如果我能找到一个，我将在这里发布所有有效的 Cordova 解决方法

4

3 回答 3

3

如果您想要实现的是将文件保存在文件系统中，您可以使用字符串 base64 将其保存到文件系统

image = "data:image/png;base64,iVBORw0KGgo... bla bla bla"
Capacitor.Plugins.Filesystem.appendFile({
    data:image,
    path:"directory/image.png",
    directory:"DOCUMENTS"
}).then(c=>{console.log("se escribiooo")})

它在您的文件系统中生成图像（我刚刚在android模拟器中尝试了此代码），只需使用方法appendFile而不是writeFile，使用base64代替blob，如果您只有blob，您只需将其转换为base64

于 2019-12-30T17:23:40.063 回答
2

与您分享我的解决方法。

我正在使用文件系统插件的网络实现。不知道这是否是一个好的解决方案，但它有助于解决我的问题。

import { FilesystemDirectory, FilesystemEncoding } from '@capacitor/core'
// const { Filesystem } = Plugins // => Doesn't work with blob in native
// Workaround: Use Web-Implementation of plugin
import { FilesystemPluginWeb } from '@capacitor/core/dist/esm/web/filesystem.js'
const Filesystem = new FilesystemPluginWeb()
于 2019-11-16T22:10:36.930 回答
1

您可以创建一个插件，您可以将一个 URL 传递给该插件，它将以本地方式下载。正如您已经发现传递 blob/file 是不可能的，但是。

如果没有可用的插件或者您不想创建一个。您可以调用本机函数js，您可以从中侦听nativeURL 等。

于 2019-07-02T21:56:24.993 回答