How to download PDF file from server in Ionic 2?

Question

I’m using the MPDF_6_0 library to generate Pdfs files, testing unitarily works, but I can’t trigger it through the Ionic project. How to do this?

Thanks to all of the community.

import { Injectable } from '@angular/core';
import { Http, Headers, Response, ResponseOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

//criada para trazer dados da tela inicial

/*
  Generated class for the ServiceProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/

//classe serviço
@Injectable()
export class ServiceProviderInicio {

      //api : string = 'http://localhost:80/APIEST/inicio/';
        api : string = 'http://localhost:4000/APIEST/inicio/';

  constructor(public http: Http) {}

          getDataPDF() {
            return this.http.get(this.api + 'gerar_pdf.php')
      }






      getDataUsuarioId() {
            return this.http.get(this.api + 'apiRecuperaQrcode.php').map(res=>res.json())
      }

      getDataLogin() {
            return this.http.get(this.api + 'apiRecuperaLogin.php').map(res=>res.json())
      }


      getDataInicioVaga() {
            return this.http.get(this.api + 'apiRecuperaVaga.php').map(res=>res.json())
      }

      getDataNome() {
            return this.http.get(this.api + 'apiRecuperaNome.php').map(res=>res.json())
      }

      getDataTempoValor() { //valor a pagar por tempo de uso
            return this.http.get(this.api + 'apiRecuperaTempoValor.php').map(res=>res.json())
      }

      getDataFazerLogin() { //valor a pagar por tempo de uso
            return this.http.get(this.api + 'apiLogin.php').map(res=>res.json())
      }

      updateVaga(data) {
    let headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded' });
    return this.http.post(this.api + "apiUpdateVaga.php", data, {
          headers:headers,
          method:"POST"
    }).map(
          (res:Response) => {return res.json();}
    );
}


}






//classe aplicação

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AlertController } from 'ionic-angular';//
import { ServiceProviderInicio } from '../../providers/inicio/inicioservice';//
//import { ServiceProvider } from '../../providers/service/service';//

@Component({
  selector: 'page-inicio',
  templateUrl: 'inicio.html'
})
export class InicioPage {
  
  users : any[];
  tempoValor;
  vaga  : any[];
  nomeUsuario  : any[];   
  nomes : boolean = true;  
  elementType : 'url' | 'canvas' | 'img' = 'url';
  value;  //só recebe string
  constructor(public navCtrl: NavController,
              private alertCtrl: AlertController,
              public service : ServiceProviderInicio
              //public service1 : ServiceProvider
              

            ) {
 
  }

  ngOnInit() {
           this.getVaga();
           this.getDadosUsuarioId();
           this.getDadosLogin() ;
           this.getNomeInicio();
           this.getTempoValor();
           
     }

     getDadosPDF() {
     //retorno de Dados
     this.service.getDataPDF();
         
           console.log('foi')
     }



    getDadosLogin() {
     //retorno de Dados
     this.service.getDataLogin()
           .subscribe(
                 data=> this.users = data
                 ,err=> console.log(err)
           );
     }

     getDadosUsuarioId() {
     //retorno de Dados
     this.service.getDataUsuarioId()
           .subscribe(
                 data=> this.value = data
                 ,err=> console.log(err)
           );
     }

     getVaga() {
     //retorno de Dados
     this.service.getDataInicioVaga()
           .subscribe(
                 data=> this.vaga = data
                 ,err=> console.log(err)
           );
     }


     getNomeInicio() {
     //retorno de Dados
     this.service.getDataNome()
           .subscribe(
                 data=> this.nomeUsuario = data
                 ,err=> console.log(err)
           );
     }

     getTempoValor() {
     //retorno de Dados
     this.service.getDataTempoValor()
           .subscribe(
                 data=> this.tempoValor = data
                 ,err=> console.log(err)
           );
     }

     salvarVaga(req) {
         let prompt = this.alertCtrl.create({
           title: 'Lembrar Vaga',
           inputs: [
             {
               name: 'vaga_utilizada',
               placeholder: 'Guarde sua Vaga',
               value:req.vaga_utilizada
             },

           ],
           buttons: [
             {
               text: 'Cancelar',
               handler: data => {}
             },
             {
               text: 'Salvar',
               handler: data => {

                let params:any={
                  //  variavel banco de dados:data.variavel java
                       id_hp: req.id_hp,
                       vaga_utilizada: data.vaga_utilizada
                       
                 }
                 console.log(data);
                  this.service.updateVaga(params)
                 .subscribe(
                       data=>{
                             console.log(data.mensage);
                             this.getVaga();
                             },
                       err=>console.log(err)
                 );
               }
             }
           ]
         });
         prompt.present();
       }




     mostraNome() {
           this.nomes = !this.nomes;
     }
  }

<?php
	//baixar a class mPDF no site http://www.mpdf1.com/mpdf/index.php
	//Descompactar o arquivo na pasta pdf  --celke https://www.youtube.com/watch?v=NFddudVVXwc
	include ('pdf/mpdf.php');
	
	$servidor = "localhost";
	$usuario = "root";
	$senha = "";
	$dbname = "estacionamentobd";
	
	//Criar a conexão
	$conn = mysqli_connect($servidor, $usuario, $senha, $dbname);
	if(!$conn){
		die("Falha na conexao: " . mysqli_connect_error());
	}else{
		//echo "Conexao realizada com sucesso";
	}
	
	//$id_pessoa = "1";
	$result_usuario = "SELECT * FROM pessoa";
	$resultado_usuario = mysqli_query($conn, $result_usuario);	
	$row_usuario = mysqli_fetch_assoc($resultado_usuario);	
	
	
	$pagina = 
		"<html>
			<body>
				<h1>Informações do Usuário</h1>
				Id_pessoa: ".$row_usuario['id_pessoa']."<br>
				Nome: ".$row_usuario['nome_pessoa']."<br>
				E-mail: ".$row_usuario['email_pessoa']."<br>
				Senha: ".$row_usuario['cpf_pessoa']."<br>
				<h4>http://www.celke.com.br</h4>
			</body>
		</html>
		";
//echo($pagina);
$arquivo = "Cadastro01.pdf";

$mpdf = new mPDF();
$mpdf->WriteHTML($pagina);

$mpdf->Output($arquivo, 'D');

// I - Abre no navegador
// F - Salva o arquivo no servido
// D - Salva o arquivo no computador do usuário
?>

Answer 1

This way you are not downloading the pdf, only recovering the path of it. To download the file you can use the Filetransfer of ionic-native.

import { FileTransfer }from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

export MyClass {

    constructor(private transfer: FileTransfer, private file: File) {}

    download() {
        const url = 'http://www.example.com/file.pdf';
        fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
            console.log('download complete: ' + entry.toURL());
        }, (error) => {
            // handle error
        });
    }
}