Opening PDF file in ionic 2 app

Question

I am trying to make an ionic 2 app. I have a pdf generated using jsPDF.

The code for the same is

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);

Now I want to save the open the PDF in the mobile app,

but doc.output('save', 'tester.pdf'); doesn't seem to work in the mobile app.

Please can you tell me which plugin can I install so as to view and share the newly made pdf.

Answer 1

One has to use jsPDF to create a PDF. Then one has to use blob attribute to convert it to the format that can be used by the application to allow passing in the app before putting it on screen.

After the blob step, One has to install ng2-pdf-viewer on the command line by the command npm install ng2-pdf-viewer --save and use the <pdf-viewer> to view it on the mobile app screen.

Make sure you import the the ng-pdf-viewer in the app.module.ts file in the import statements and in the @NgModule.

Here is the code for the same,

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);
var blob = doc.output('blob', {type: 'application/pdf'});
let pdfUrl = {pdfUrl: URL.createObjectURL(blob)};
let modal = this.navCtrl.push(ResumeView, pdfUrl);

in the ResumeView

@Component({
  selector: 'page-resume-view',
  templateUrl: '<ion-content padding text-center>
                   <pdf-viewer [src]="pdfUrl" 
                               [page]="page" 
                               [original-size]="false"
                               style="display: block;">

                    </pdf-viewer>
                </ion-content>',
})
export class ResumeView {
  pdfUrl : String;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ResumeView');
    this.pdfUrl = this.navParams.get('pdfUrl');
   }

}