如何使用 Ionic FileOpener 和 Capacitor 从 Blob 打开 PDF 文件

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 浏览器，但该插件需要一个httpsURL 并捕获。

任何帮助都受到高度赞赏。

PS：正如我的问题中提到的，我正在用 Capacitor 构建应用程序。因此，我只能使用哪些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);
});

PS 因为你是用 阅读encoding: FilesystemEncoding.UTF8，我假设你也用它来写，我认为这行不通，你不应该把它写成没有编码的 base64 数据。