How to Show PDF File in Ionic App with Out Download

How can I get and view PDF (DocumentViewer) in Ionic 5?

For this solution, What i found out in this project, already have a built in assets folder, where I'm using android studio before running in the emulator then i able to fix it by copy the pdf file from the assets folder (I created), and paste to the original assets folder that already built with the project which result able to view the pdf on emulator. Thanks.

ionic how to open pdf file and see in device for both ios and android

install plugin

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

then try this

<a class="item" href="#" onclick="window.open('http://www.orimi.com/pdf-test.pdf', '_system', 'location=yes'); return false;">
  Open pdf
                </a>

How to open pdf in ionic

To open existing PDF file, you can use File Opener plugin.

First install the Cordova and Ionic Native plugins:

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

Then add this plugin to your app's module (app.module.ts):

...

import { FileOpener } from '@ionic-native/file-opener';

...

@NgModule({
  ...

  providers: [
    ...
    FileOpener
    ...
  ]
  ...
})
export class AppModule { }

Now you can use your plugin:

import { FileOpener } from '@ionic-native/file-opener';
    
    constructor(private fileOpener: FileOpener) { }
    
    ...
    
    this.fileOpener.open('path/to/file.pdf', 'application/pdf')
      .then(() => console.log('File is opened'))
      .catch(e => console.log('Error openening file', e));

Hope I help!

Opening PDF file in ionic 2 app

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

}

---

Related Topics