ionic 3 pdfmake 在移动设备中不起作用

Question

在我的应用程序中，有一个用于生成 PDF 的屏幕。在网络浏览器中，正在下载 PDF，显示内容，但在移动设备中，它正在下载并以 PDF 格式保存，并且内容没有写入PDF。

使用的插件：cordova pdfMake

这里是参考代码

 createPdf(val1,val2,val3) {
    this.Descr=val1;
    this.ValueDescr=val2;
    this.VisionDescr=val3;
    var docDefinition = {
      content: [
        { text: 'Family Description', style: 'header' },
        { },

        { text: 'Family History :', style: 'subheader' },
        { text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },

        { text: 'Family Values :', style: 'subheader' },
        { text:  this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},

        { text: 'Family Vision :', style: 'subheader' },
        { text: this.VisionDescr  ,style: 'story', margin: [20, 0, 0, 30] },



      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
          alignment: 'center',
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {

          fontSize: 12,
          width: '50%',
        }
      }
    }
    if(this.Descr || this.ValueDescr || this.VisionDescr)
    {
      this.pdfObj = pdfMake.createPdf(docDefinition);
    // alert("PDF has been created successfully.Kindly wait for it to be downloaded...")
    this.downloadPdf(this.pdfObj);
  }
  }
  downloadPdf(val) {  
    this.pdfObj = val;
    if (this.platform.is('cordova')) {
      this.pdfObj.getBuffer((buffer) => {
        var blob = new Blob([buffer], { type: 'application/pdf' });

        // Save the PDF to the data Directory of our App
        this.file.writeFile(this.file.externalDataDirectory, 'familydescription.pdf', blob, { replace: true }).then(fileEntry => {
          // Open the PDf with the correct OS tools

          this.fileOpener.open(this.file.externalDataDirectory + 'familydescription.pdf', 'application/pdf');
        })
      });
    } else {
      // On a browser simply use download!
      this.pdfObj.download();
    }
  } 

离子信息

Ionic:
   ionic (Ionic CLI)  : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 30 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/aligntech/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   NodeJS            : v10.13.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Answer 1

我找到了我发布的上述问题的解决方案。我通过不同的方式处理它来解决它

createPdf(val1,val2,val3) {
    let self = this;

    this.Descr=val1;
    this.ValueDescr=val2;
    this.VisionDescr=val3;
    var docDefinition = {
      content: [
        { text: 'Family Description', style: 'header' },
        { },

        { text: 'Family History :', style: 'subheader' },
        { text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },

        { text: 'Family Values :', style: 'subheader' },
        { text:  this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},

        { text: 'Family Vision :', style: 'subheader' },
        { text: this.VisionDescr  ,style: 'story', margin: [20, 0, 0, 30] },



      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
          alignment: 'center',
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {

          fontSize: 12,
          width: '50%',
        }
      }
    }
    if(this.Descr || this.ValueDescr || this.VisionDescr)
    {
      this.pdfObj = pdfMake.createPdf(docDefinition);
      pdfMake.createPdf(docDefinition).getBuffer(function (buffer) {
        let utf8 = new Uint8Array(buffer);
        let binaryArray = utf8.buffer;
        self.saveToDevice(binaryArray,"familydescription.pdf")
        });
    // this.downloadPdf(this.pdfObj);
  }

  }

  saveToDevice(data:any,savefile:any){
    let self = this;
    self.file.writeFile(self.file.externalDataDirectory, savefile, data, {replace:false});
    const toast = self.toastCtrl.create({
    message: 'File saved to your device',
    duration: 3000,
    position: 'top'
    });
    toast.present();
    }

我发现问题在于我在之前的代码中使用的文件打开器！

我引用了本网站的上述代码https://medium.com/@rakeshuce1990/ionic-how-to-create-pdf-file-with-pdfmake-step-by-step-75b25aa541a4使用此链接进行详细参考。