angular - 在 ionic 中从 base64 打开 pdf

Question

因此，我将 Jasper 报告转换为 pdf，然后在 REST Controller 中转换为 base64。我该如何将其传输到我的 ionic 3 应用程序？我查看了 Ionic Native Document Viewer，但为了做到这一点，我需要将文件传输到应用程序。有什么想法吗？

Answer 1

如果您想在 Ionic 应用程序中打开 pdf，您必须先将文件保存在本地存储中，然后再打开它。基本上你需要两个 Ionic Native 插件和一些 base64 到 blob 转换器:

导入(在组件和 app.module 中)此依赖项:

https://ionicframework.com/docs/native/file-opener/

https://ionicframework.com/docs/native/file/

接下来注入(inject)你的组件构造函数:

private opener: FileOpener,
private file: File,

然后从 REST 服务获取您的 pdf 数据作为 base64(字符串)并执行此函数:

saveAndOpenPdf(pdf: string, filename: string) {
  const writeDirectory = this.platform.is('ios') ? this.file.dataDirectory : this.file.externalDataDirectory;
  this.file.writeFile(writeDirectory, filename, this.convertBase64ToBlob(pdf, 'data:application/pdf;base64'), {replace: true})
    .then(() => {
        this.opener.open(writeDirectory + filename, 'application/pdf')
            .catch(() => {
                console.log('Error opening pdf file');
            });
    })
    .catch(() => {
        console.error('Error writing pdf file');
    });
}

并将函数从 base64 转换为 blob(需要将文件保存在磁盘上):

convertBase64ToBlob(b64Data, contentType): Blob {
    contentType = contentType || '';
    const sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    const byteCharacters = window.atob(b64Data);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
         const slice = byteCharacters.slice(offset, offset + sliceSize);
         const byteNumbers = new Array(slice.length);
         for (let i = 0; i < slice.length; i++) {
             byteNumbers[i] = slice.charCodeAt(i);
         }
         const byteArray = new Uint8Array(byteNumbers);
         byteArrays.push(byteArray);
    }
   return new Blob(byteArrays, {type: contentType});
}