Generate PDF from client side from user input

Thu Apr 10, 2014 7:46 am

Hi,
I am trying to do the above, but do not have any experience in js/app building. I have included the jspdf sources file from the "dist" directory and created a javascript based upon the source file "jspdf.source.js" as indicated in

https://getsatisfaction.com/apperyio/...

Having created the javascript in appery, I am linking a button that was created to the javascript as seen in image. -let me know if this method is correct?

If this is correct, the next step is to view the pdf file that was just created. I don't know where the pdf file is generated (or if it is being generated). I would like this pdf file to be previewed on the screen, with an email sent to user at the same time.

I do understand this is a lot of questions, I would appreciate if you could just point me in the right direction.

Looking forward to your reply.

Have a great day!

Thu Apr 10, 2014 8:51 am

Hello!

1) "-let me know if this method is correct?" - yes, that' s right
2) where to save and what to do with file depends on what you write in JS - take a look here http://www.tricedesigns.com/2014/01/0...
This should help to figure out how and where to create file http://cordova.apache.org/docs/en/3.0...

Thu Apr 10, 2014 10:19 am

Maryna,

Thank you for your reply and pointing me in the right direction. As I do not have js programming knowledge, this is really a challenge for me. Will keep you informed on the status.

Have a wonderful day!

Fri Apr 11, 2014 10:21 am

Hello,

I have been trying to no avail. I simply don't know where to edit (or add) the JavaScript code

QUOTE
Then, be sure to include the library inside of your main HTML file.

I used the uncompressed/minified source file in the “dist” directory.

UNQUOTE

Is there a worked example to which i can follow?

Once again thank you in advance for your time. I'm a new programmer and I am just trying to generate a simple APP to print out the form that was produced by the user.

Kind Regards

Fri Apr 11, 2014 10:53 am

Hello!

[quote:]be sure to include the library inside of your main HTML file[/quote] do Create New - JavaScript, add there plugin cone and it would be added to main HTML file.

Tue Apr 15, 2014 9:13 am

Hello,
I have included it by the following steps:
1) create New Javascript (named it jsPDF)
2) upload from file link to dist and jspdf source file that is located (C:\Users\User\Desktop\jsPDF\dist\jspdf.source)
3) created a button to "print" PDF
4) link the button to eventclickrun javascript and entered this code to "test if its working"
QUOTE
//FIRST GENERATE THE PDF DOCUMENT
console.log("generating pdf...");
var doc = new jsPDF();

doc.text(20, 20, 'HELLO!');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
doc.text(20, 50, 'YES, Inside of PhoneGap!');

var pdfOutput = doc.output();
console.log( pdfOutput );

//NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
console.log("file system...");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

Code: Select all

console.log(fileSystem.name); 
console.log(fileSystem.root.name); 
console.log(fileSystem.root.fullPath); 

fileSystem.root.getFile("test.pdf", {create: true}, function(entry) { 
   var fileEntry = entry; 
   console.log(entry); 

   entry.createWriter(function(writer) { 
      writer.onwrite = function(evt) { 
      console.log("write success"); 
   }; 

   console.log("writing to file"); 
      writer.write( pdfOutput ); 
   }, function(error) { 
      console.log(error); 
   }); 

}, function(error){ 
   console.log(error); 
});

},
function(event){
console.log( evt.target.error.code );
});
UNQUOTE

Question 1: These were the following steps that I have undertaken to get to where I am at, is this correct?

Question 2: Where can i retrieve this file if Q1 is correct?

Question 3: A page has been created to obtain the results from client input (i.e. on page load, the data that was input is loaded on the screen). I want to print this into a pdf format. How can i do this once I have setup Q1 and Q2 correctly?

Once again, I would be appreciative if you could provide me with a step by step guide as my js programming is close to nothing. Thanking you in advance for your assistance to this!

Kind Regards

Wed Apr 16, 2014 2:13 am

Hi Ken.

Thanks for your detail description.

Q1 - yes, do all you need. But you should make sure if you connect jspdf correctly.

Run your app in the browser without frame.

Open console. And type there following code:

console.log(jsPDF);

And run this code. Should return a long function. If you have error this means you have problem with including jspdf to your app.

Q2 - you should get this file in the root of the FS. Please try to find here file "test.pdf".

Q3 - to get generated pdf onto the page you should:

1 Add HTML component, set dimmentions for it "auto" and "auto".

2 Fill component HTML with following code:

code
<iframe width="100%" height="500px" id="pdfOutContainer"></iframe>/code

3 Modify your button click event handler with following code:
pre

console.log("generating pdf...");
var doc = new jsPDF();

doc.text(20, 20, 'HELLO!');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
doc.text(20, 50, 'YES, Inside of PhoneGap!');

var pdfUriString = doc.output('datauristring');
console.log(pdfUriString);

var pdfOutContainer = jQuery("#pdfOutContainer");
pdfOutContainer.attr("src", pdfUriString);
/pre
After you clicked on the button you will get your PDF in the browser if it supports.

//Note this code below cancels generating pdf for save it in the file. To generate file you should use your code.

Wed Apr 16, 2014 10:15 am

Good day Alena,

Thank you for your kind response. I have opened the console and tested the script as stated in Q1. No errors were obtained from this!

Q2: This may seem really simple, but due to the lack of experience on JS, I do not know where I can find it. Please see the image below..

Would appreciate your guidance, apologies for being new to this.

Regards

Ken

Wed Apr 16, 2014 8:05 pm

Hello!

Error in your last picture means that you don't generate file. So you can't find it
You can read more about PhoneGap plugin LocalFileSystem http://docs.phonegap.com/en/3.0.0/cor...

Or try "Q3 - to get generated pdf onto the page you should" which was sent you in previous reply.

Thu Apr 17, 2014 6:27 am

Hello Maryna/Alena,

Thank you for your kind response to this matter. I failed to inform you in my previous reply that Q3 works fine. I managed to generate the pdf on the page!

However, with respect to Q2, I suspect that I did not call out the file writer plugin correctly. Where do I add this command?

phonegap create . "jspdf.sample" "JSPDF App"
phonegap local plugin add org.apache.cordova.file
phonegap local plugin add https://git-wip-us.apache.org/repos/a...

Please advise.

Kind Regards

Ken