如何使用 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 文件存储到硬盘 phone 并检索然后加载和显示它的更好方法是什么？我试过将它推送到 Safari 浏览器，但该插件需要一个 https URL 并且也会捕获。

非常感谢任何帮助。

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

Answer 1

Blob url 是一个 url 只有应用程序的 WebView 可以理解，您不能使用那个 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 和 Capacitor 从 Blob 打开 PDF 文件

How to open a PDF File from Blob with Ionic FileOpener and Capacitor

ionic-framework

capacitor