Opening PDF File In Ionic 2 App

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('T

Solution 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:

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"
  } 

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

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

4-Finally, you can write code as below:

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

I Hope this could help you, Thanks :)

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

}

Solution 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>

Solution 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

Solution 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>