(Cordova/Capacitor) 如何从应用程序中下载文件？

Question

目标: 我的应用程序创建一个zip文件，用户将其下载到他们的设备上。

问题: 在Electron和浏览器中它完美运行，但在Android中无法正常工作。

尝试1 window.showSaveFilePicker（）

      const fileHandle = await window.showSaveFilePicker({suggestedName: 'package.zip'});
      const writable = await fileHandle.createWritable();
      await writable.write(blob);
      await writable.close();

打开一个窗口保存文件。在浏览器和Windows应用上有效。 在Android上，则没有任何反应。

尝试使用第二个下载链接

      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href =  downloadUrl; 
      link.target= '_blank';
      link.download = 'package.zip';
      document.body.appendChild(link);
      link.click();

打开一个窗口以保存文件。与浏览器和Windows应用程序配合使用。 在Android中，无法使用。Android Studio日志：E/Capacitor: 无法打开资产URL。

尝试3个本地文件下载链接（仅用于检查）

<a href="/assets/imgs/pack.zip" download>DOWNLOAD</a>

可与浏览器和Windows应用程序配合使用。但在Android上，则无法正常使用，会出现相同的错误。

尝试4种替代方法

const path = `${directory}/${name}`;
const blob = new Blob([file], {type: file.type});
const data = await this.blobToBase64(blob);
await Filesystem.writeFile({path, data, directory: Directory.Documents, encoding: Encoding.UTF8});

使用FileSystem (Directory.Documents)来保存到用户设备。我想避免将文件转换为base64以便使用Android FileSystem API，这不够用户友好，也无法正常工作。它们是无法使用的。 :/

附加信息

AndroidManifest.xml

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

package.json

"@capacitor/android": "^3.6.0",
"@capacitor/core": "^3.6.0",
"@capacitor/filesystem": "^1.1.0",

- Codeur de nuit

---

你是不是在使用一个框架？https://dev59.com/irD3oIgBc1ULPQZFBmtD - Eric

Answer 1

我成功地使用FileSharer插件使其工作。

在我的实现中，我通过HTTP请求获取文件，但FileSharer还支持从base64源共享文件。

它的功能是打开一个共享弹窗，允许用户将文件保存到文件系统或与其他应用程序共享。

这是我的实现： "@byteowls/capacitor-filesharer": "^4.0.0"

openFile(params: { res: any; filename: string}) {
    const file = new Blob([params.res], {type: 'application/octet-stream'});
    if (!window.hasOwnProperty('cordova')) {
      // Web implementation
    } else {
      const reader = new FileReader();
      reader.onload = () => {
          const dataUrl: any = reader?.result;
          if (dataUrl) {
            const base64 = dataUrl.split(',')[1];
            FileSharer.share({
              filename: params.filename,
              base64Data:   base64,
              contentType: 'application/octet-stream',
            });
          }

      };
      reader.readAsDataURL(file);
    }
  }

- Paolo Cuscela