在ionic中从base64打开pdf [英] open pdf from base64 in ionic

问题描述

所以我有Jasper报告，我将其转换为pdf，然后在REST控制器中转换为base64.如何将其转移到ionic 3应用程序?我已经研究了Ionic Native Document Viewer，但是为了做到这一点，我需要将文件传输到应用程序.有什么想法吗?

解决方案

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

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

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

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

接下来注入您的组件构造函数:

private opener: FileOpener,
private file: File,

然后从REST服务以base64(字符串)的形式获取pdf数据并执行此功能:

 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(需要在磁盘上保存文件):

 convertBaseb64ToBlob(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});
}
 

So I have Jasper reports that I convert to pdf, then to base64 in a REST controller. How do I go about transferring this to my ionic 3 app? I've looked into the Ionic Native Document Viewer, but in order to do this, I would need to transfer the file to the app. Any thoughts?

解决方案

If you like to open pdf in Ionic app you have to first save file in local storage and then open it. Basically you need two Ionic Native plugins and some base64 to blob converter:

Import (in component and in app.module) this dependencies:

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

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

Next inject in your components constructor:

private opener: FileOpener,
private file: File,

then get your pdf data from REST service as base64 (string) and execute this function:

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');
    });
}

And convert function from base64 to blob (need for saving file on disk):

convertBaseb64ToBlob(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});
}

这篇关于在ionic中从base64打开pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！