Ionic 电容器应用程序,在本地提取Zip文件并访问它

ecfdbz9o  于 12个月前  发布在  Ionic
关注(0)|答案(1)|浏览(167)

我有一个离子/电容器应用程序,并希望能够下载一个ZIP文件本地到设备上,解压缩,然后在离子/电容器应用程序中提供页面。ZIP文件包含一个压缩的静态网站。我希望能够提取该网站,并通过应用程序(即离线模式)查看它。
最好同时支持iOS和Android。
电容器是否支持这一点,以及围绕这一点的策略是什么?

z9zf31ra

z9zf31ra1#

您可以使用几种解决方案:
1.当开发一个使用电容器的应用程序时,可以使用Cordova插件。正如https://github.com/danielsogl/awesome-cordova-plugins中所说,Awesome Cordova插件也可以与电容器一起工作,Ionic的官方原生运行时。插件https://danielsogl.gitbook.io/awesome-cordova-plugins/zip可以用来解压缩文件。
1.也可以使用其他js库来解压缩。例如,您可以查看Ionic 6 - Capacitor Filesystem - copy SQLite files from ZIP
这里我不解释选项1,因为我使用选项2是为了在我的电容器项目中不使用cordova插件。
我使用JSZip来解压缩(https://github.com/Stuk/jszip

> npm install jszip

字符串
在您的“service.ts”中,在Filesktop capacitor插件的帮助下下载您的文件:

downloadRes = await Filesystem.downloadFile({
    path: pathRelativeTodirectory,
    directory: directory,
    url: urlOfTheZipFile,


然后,使用jszip,您可以提取zip的所有文件并注册这些文件,如果您愿意:

//read zip file
    let data = await Filesystem.readFile({
      path: pathRelativeTodirectory,
      directory: directory
    })

    let zipContent = await JSZip.loadAsync(data.data);
    //Unzip file and register all files on disk
    zipContent.forEach(async (relativePath: string, zipFile: JSZip.JSZipObject) => {
      console.log("Write file from zip " + relativePath);
      await Filesystem.writeFile({
          path: relativePath,
          directory: directory,
          data: await zipFile.async('blob'),
          recursive: true
      });          
    });

相关问题