在 Ionic 3 应用程序中打开 Base64 编码的 PDF 文件答案

【问题标题】：Open Base64 encoded PDF file in an Ionic 3 app在 Ionic 3 应用程序中打开 Base64 编码的 PDF 文件
【发布时间】：2018-01-03 00:02:40
【问题描述】：

我构建了一个 Ionic 3 应用，我想显示一个 base64 编码文件的预览。

我首先尝试使用这个插件： https://www.npmjs.com/package/ng2-pdf-viewer

一开始它有效，但今天我的 PDF 不再出现。也许是因为依赖关系已经过时了。无论如何，这个插件并没有给我一个令人满意的预览。

现在我找到了这个：https://ionicframework.com/docs/native/base64/

但问题是我不能在这个插件中使用 Base64。

我真的不知道我能做些什么来解决这个问题。有人有解决方案吗？

【问题讨论】：

标签： angular pdf ionic3

【解决方案1】：

您必须将 Base64 字符串转换为 Uint8Array。来自Download File from Bytes in JavaScript。

向调用组件添加 base 64 转换函数

base64ToArrayBuffer(base64) {
    const binary_string = window.atob(base64);
    const len = binary_string.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

内容初始化后：

public ngAfterContentInit(): void {
  this.viewer.pdfSrc =  this.base64ToArrayBuffer(this.model.pdfBytes);
}

其中 this.model.pdfBytes 包含 base64 编码的字符串。

【讨论】：

【解决方案2】：

我不知道我的解决方案是否是您正在寻找的，但我使用了它并且它有效。

 Pdf(){
this.rest.getPdfVacation(this.mail).then(data=>{
  if(data.json()){
    let pdf = window.open(); 
    pdf.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + data.json().RESPUESTA + "'></iframe>"); 
  }
}) }

如您所见，我在新选项卡中打开了 pdf，但您可以避免这种情况，我的 base64 字符串位于 data.json().RESPUESTA 中，因此您应该在该位置放置 base64 数据。

干杯！

【讨论】：

此代码在 ionic 3 中不起作用，这不是在 ionic 应用程序中打开 PDF 的正确方法。