Opening PDF file in ionic 2 app

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I think includes script via external URL may not a good option in ionic. There is an other way as below:

1-Install ng2-pdf-viewer module

npm install ng2-pdf-viewer --save 

And import PdfViewerComponent in your app.moudle.ts as below:

enter image description here

2- Instead of including jspdf.debug.‌​js via extenal url, you can install jspdf module

npm install jspdf --save

3- Implement ionic copy custom script

Create scripts folder in root of your ionic project and create a file name copy-custom-libs.js inside scripts folder.

module.exports = {
  copyCustomScript: {
    src: ["{{ROOT}}/node_modules/jspdf/dist/jspdf.min.js"],
    dest: "{{WWW}}/assets"
  }
} 

In package.json, add config attribute at bottom as below:

 "config": {
      "ionic_copy": "./scripts/copy-custom-libs.js"
  } 

enter image description here

Update index.html and add jspdf.min.js from your assets folder.

<script src="assets/jspdf.min.js"></script> 

enter image description here

4-Finally, you can write code as below:

enter image description here

enter image description here

enter image description here

The source code of this example can be found here: ionic pdf viewer

I Hope this could help you, Thanks 🙂

Method 2

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

}

Method 3

it is very simple

step:1) install pdf-viewer plugin:

     npm install ng2-pdf-viewer --save

step:2) in your app.module.ts:

   import { PdfViewerComponent } from 'ng2-pdf-viewer';

   @NgModule({
           declarations: [
              PdfViewerComponent,
            ],

step:3)in app.component.ts:

      import { PdfViewerComponent } from 'ng2-pdf-viewer';

step:4) in your page html file:

 <ion-content>
 <pdf-viewer [src]="'YOUR_PDF_FILE_PATH'" [page]="page" [original-size]="false" style="display:block;"> </pdf-viewer>
 </ion-content>

Method 4

Install plugin :

ionic cordova plugin add cordova-plugin-file-opener2
npm install --save @ionic-native/file-opener


this.fileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

Ref : link

Method 5

You may try for this:

In Component part:

    import { DomSanitizer} from '@angular/platform-browser';
    url :any;

    constructor(private sanitizer: DomSanitizer) { }
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.amu.ac.in/pdf/FreeResources.pdf');

In HTML part :

<iframe  [src]="url" width="100%" height="100%" frameborder="0" ></iframe>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply