jsPDF not working in ionic 3. Why?

Ionic Framework ionic-v3
1

Friends,

I try to use jsPDF in ionic 3
but it’s not calling
npm install jspdf --save
npm install @types/jspdf --save
then i import

import * as jsPDF from ‘jspdf’;

then call it using

var doc = new jsPDF();
       doc.text(20, 20, 'Hello world!');
       doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
       doc.addPage();
       doc.text(20, 20, 'Do you like that?');

       // Save the PDF
       doc.save('Test.pdf');

but no result. Please advise

Thanks

Anes

2

@anespa Are you getting any error?

3

No Error just it not working…

4

I think the issue for direct save your pdf file,
for, ionic app use this code


let pdfOutput = doc.output();

let buffer = new ArrayBuffer(pdfOutput.length);

let array = new Uint8Array(buffer);

for (var i = 0; i < pdfOutput.length; i++) {
    array[i] = pdfOutput.charCodeAt(i);
}

// For this, you have to use ionic native file plugin
const directory = this.file.externalApplicationStorageDirectory ;

const fileName = "Test.pdf";

this.file.writeFile(directory,fileName,buffer)
.then((success)=> console.log("File created Succesfully" + JSON.stringify(success)))
.catch((error)=> console.log("Cannot Create File " +JSON.stringify(error)));
1 Like
5

Hi dear @addwebsolution,

Your solution works fine … Thanks alot…
my current function is

getPaymentReceipt(uuid,bid)
  {
    this.propertyProvider.getReceiptDetails(uuid,bid)
    .then(data => {
        this.paymentDetails = data;
        let epayTransID = data[0].epayTransID;
        let status = data[0].status;
        //let ReceiptDate = data[0].ReceiptDate;
        let TaxPeriod = data[0].TaxPeriod;
        let TotAmount = data[0].TotAmount;
        let BankRefNo = data[0].BankRefNo;
        var doc = new jsPDF();
        doc.setFontSize(29);
        doc.setFont('helvetica');
        doc.setFontType('bold');
        doc.text(35, 25, 'Payment Receipt - Property Tax');
        let ReceiptDate = this.dp.transform(new Date(), 'dd/MM/yyyy; h:mm:a');
        doc.setFontSize(19);
        doc.setFontType('normal');
        doc.text(21, 43,'Date : '+ReceiptDate);
        
        doc.text(21, 59, 'Status :'+status);
        doc.text(21,73,'Total Amount: '+TotAmount);
        doc.text(21,89,'Tax Period :'+TaxPeriod);
        doc.text(21,105,'Bank Ref No :'+BankRefNo);

        doc.setFontType('bold');
        doc.text(21,121,'Save this PDF for future reference');
        let pdfOutput = doc.output();
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (var i = 0; i < pdfOutput.length; i++) {
          array[i] = pdfOutput.charCodeAt(i);
        }
        // For this, you have to use ionic native file plugin
        const directory = this.file.externalApplicationStorageDirectory ;
        const fileName = "Payment-receipt.pdf";
        this.file.writeFile(directory,fileName,buffer)
        .then((success)=> console.log("File created Succesfully" + JSON.stringify(success))
            
         )
        .catch((error)=> console.log("Cannot Create File " +JSON.stringify(error)));


    });
  }

I need to open the stored PDF file using file opener after

  .then((success)=> console.log("File created Succesfully" + JSON.stringify(success))
            
         )

How it can done ? please advise

Thanks
Anes

6

Dear @addwebsolution,

I got complete solution . Thanks alot buddy…

my working function is now

 getPaymentReceipt(uuid,bid)
  {
    this.propertyProvider.getReceiptDetails(uuid,bid)
    .then(data => {
        this.paymentDetails = data;
        let epayTransID = data[0].epayTransID;
        let status = data[0].status;
        //let ReceiptDate = data[0].ReceiptDate;
        let TaxPeriod = data[0].TaxPeriod;
        let TotAmount = data[0].TotAmount;
        let BankRefNo = data[0].BankRefNo;
        var doc = new jsPDF();
        doc.setFontSize(29);
        doc.setFont('helvetica');
        doc.setFontType('bold');
        doc.text(35, 25, 'Payment Receipt - Property Tax');
        let ReceiptDate = this.dp.transform(new Date(), 'dd/MM/yyyy; h:mm:a');
        doc.setFontSize(19);
        doc.setFontType('normal');
        doc.text(21, 43,'Date : '+ReceiptDate);
        
        doc.text(21, 59, 'Status :'+status);
        doc.text(21,73,'Total Amount: '+TotAmount);
        doc.text(21,89,'Tax Period :'+TaxPeriod);
        doc.text(21,105,'Bank Ref No :'+BankRefNo);

        doc.setFontType('bold');
        doc.text(21,121,'Save this PDF for future reference');
        let pdfOutput = doc.output();
        let buffer = new ArrayBuffer(pdfOutput.length);
        let array = new Uint8Array(buffer);
        for (var i = 0; i < pdfOutput.length; i++) {
          array[i] = pdfOutput.charCodeAt(i);
        }
        // For this, you have to use ionic native file plugin
        const directory = this.file.externalApplicationStorageDirectory ;
        alert(directory);
        const fileName = "Payment-receipt.pdf";
        this.file.writeFile(directory,fileName,buffer)
        .then((success)=> 
        this.fileOpener.open(directory+'/'+fileName, 'application/pdf') .then(() => console.log('File is opened'))
         )
        .catch((error)=> console.log("Cannot Create File " +JSON.stringify(error)));




        //this.createPdf(epayTransID,status,ReceiptDate,TaxPeriod,TotAmount,BankRefNo);
    });
  }

Anes

7

what type instance for ios file i have to use. please give me example code