Question

在Ionic 5项目中，我有一个PDF下载到设备（物理iPhone Pro，iOS模拟器以及Android设备）。转换为Base64并存储为.txt文件。我正在检索文件，如下所示：

const options = {
  path: path,
  directory: FilesystemDirectory.Data,
  encoding: FilesystemEncoding.UTF8
}

Filesystem.readFile(options)
  .then(result => {

    const jsonCast = JSON.parse(result.data)
    const blop: Blob = this.convertBase64ToBlob(jsonCast)
    resolve(blop)
})

代码中的下一步是获取Blob文件的URL：

const fileURL = URL.createObjectURL(blob)

现在，当我尝试使用以下方法打开文件时，请使用Ionic native的FileOpener：

this.fileOpener.open(blobURL, 'application/pdf')

我收到错误消息File does not exist。

⚡️  [log] - fileURL:  blob:capacitor://localhost/ff4efd06-a313-44ce-b386-c756d456e72f   
2019-09-23 17:06:19.267144-0700 App[25791:19944973] Path parameter not encoded. Building file URL encoding it...
2019-09-23 17:06:19.267326-0700 App[25791:19944973] looking for file at blob:capacitor:/localhost/ff4efd06-a313-44ce-b386-c756d456e72f -- file:///
⚡️  [log] - Error opening file {"status":"9","message":"File does not exist"}

我所缺少的是什么？将PDF文件存储到硬电话并检索然后加载并显示的更好的方法是什么？我曾尝试将其推送到Safari浏览器，但该插件需要一个https URL并也可以捕获。

我们非常感谢您的帮助。

PS：如我的问题所述，我正在使用电容器构建该应用程序。因此，我只能使用哪些cordova插件。感谢您在帮助中考虑到这一点。

Answer 1

Blob URL是应用程序的WebView只能理解的URL，您不能使用该URL在另一个应用程序中打开它。

无需获取文件数据并为其创建blob URL，只需使用getUri函数即可获取文件的文件系统路径。

Filesystem.getUri({
  directory: FilesystemDirectory.Data,
  path: path
}).then((getUriResult) => {
  const path = getUriResult.uri;
  this.fileOpener.open(path, 'application/pdf')
}, (error) => {
  console.log(error);
});

P.S。由于您正在使用encoding: FilesystemEncoding.UTF8进行读取，因此我假设您也使用它来编写，但我认为这不起作用，您不应该将其作为没有编码的base64数据来编写。

如何使用Ionic FileOpener和电容器从Blob打开PDF文件

1 个答案: