search

cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
107 stars 61 forks source link

Can I generate html files into PDF from my local project folder? #89

Closed somedeveloperguy closed 4 years ago

somedeveloperguy commented 5 years ago

Hi, I am using phonegap. And I want to generate html files from my local project folder into PDF. Is it possible? Hoping to get a reply soon.

cesarvr commented 5 years ago

Hi, it's possible I would suggest you take a look at this example. it uses diverse techniques to transform HTML to PDF, including the one you are interested. :)

somedeveloperguy commented 5 years ago

Thank you for the immediate response. Another problem has occurred. I am appending ajax responses to the HTML file. e.g $('#id').html(data); But it doesn't seem to be rendered when converted to PDF. All I get are the static HTML tags I have typed in the file. What could be the possible problem and solution for this?

somedeveloperguy commented 5 years ago

Hi, it's possible I would suggest you take a look at this example. it uses diverse techniques to transform HTML to PDF, including the one you are interested. :)

let options = { documentSize: 'A4', type: 'share' }

pdf.fromURL( 'sample.html', options) .then((stats)=> console.log('status', stats) ) // ok..., ok if it was able to handle the file to the OS.
.catch((err)=>console.err(err))

I am using this code but doesn't seem to work. But when I included http://localhost/folder/sample.html It works perfectly fine. Is there any way I can convert html to pdf without including http:// ???

cesarvr commented 5 years ago

pdf.fromURL( 'sample.html', options) This one only works with URL, If you need to make a call to some server using (Asynchronous)-AJAX, it won't work because rendering the PDF is can be faster than a network response.

I would suggest that you make the AJAX call, wait for the response and then use a string template, for example: 

let options = {
documentSize: 'A4',
type: 'share'
}

 let HTML = (data) => `
<HTML> 
<form> 
 name: ${data.name}
</form>    
</HTML>` 

$('/server').response( response => {
 let data = response.getJSON()

pdf.fromData(  HTML(data),  options  ).then(/*...*/).catch(/*...*/)
})

Otherwise you won't be able to guarantee that the data is ready before it can be transformed into PDF.

Cheers.

somedeveloperguy commented 5 years ago

pdf.fromURL( 'sample.html', options) This one only works with URL, If you need to make a call to some server using (Asynchronous)-AJAX, it won't work because rendering the PDF is can be faster than a network response.

I would suggest that you make the AJAX call, wait for the response and then use a string template, for example:

let options = {
documentSize: 'A4',
type: 'share'
}

 let HTML = (data) => `
<HTML> 
<form> 
 name: ${data.name}
</form>    
</HTML>` 

$('/server').response( response => {
 let data = response.getJSON()

pdf.fromData(  HTML(data),  options  ).then(/*...*/).catch(/*...*/)
})

Otherwise you won't be able to guarantee that the data is ready before it can be transformed into PDF.

Cheers.

Hi again. Thank you very much or the immediate responses!. This works really well! I tried using this and of course run some tests. But my in my select.php file. I am getting data from different tables. I am totally a newbie to phonegap and had no ideas about it's plugins so please bare with me lol

How can I use this to get all the data from my select.php ? $('/server').response( response => { let data = response.getJSON()

And also. I can't seem to include images from my local folder to the HTML using pdf.fromData for example <img src="../assets/img/sample.png">

Here's an example code from my select.php // session is a localStorage item i set with same value as username just different variables This is how I pass the session from my javascript/ajax. $.ajax({ url: "http://localhost/folder/php/select.php?session="+session, method: "GET", dataType: "JSON", success: function(data){ } 

if(isset($_GET['session'])) {
    $session = $_GET['session'];
    $sql = mysqli_query($conn,"SELECT * FROM accounts WHERE account_username ='$session'");
    $row=mysqli_fetch_assoc($sql);
    $data=$row['account_id'];
    $skl = mysqli_query($conn,"SELECT * FROM settings");
    $row=mysqli_fetch_assoc($skl);
    $term=$row['settings_term'];
    $sy=$row['settings_sy'];

    $query = mysqli_query($conn, "SELECT * FROM schedules WHERE id = '$data' and subject_semester = '$term' and subject_sy = '$sy'");
    $arr = array();
    while ($info = mysqli_fetch_assoc($query)){
        $arr[] = $info;
    }
    echo json_encode($arr);
}
elseif(isset($_GET['username'])) {
    $username = $_GET['username'];
    $sql = mysqli_query($conn,"SELECT * FROM accounts WHERE account_username ='$username'");
    $row=mysqli_fetch_assoc($sql);
    $data=$row['account_id'];
    $sql = mysqli_query($conn,"SELECT * FROM info WHERE id = '$data'");
    $array = array();
    while ($data = mysqli_fetch_assoc($sql)){
        $array[] = $data;
    }
        echo json_encode($array);
}
cesarvr commented 5 years ago

How can I use this to get all the data from my select.php ?

Assuming you are running PHP to handle server-side logic. 

pdf.fromURL( "http://<server-hostname-ip>:port/generate-pdf.php",  options  ).then(/*...*/).catch(/*...*/)
})
$.ajax({ url: "http://<server-hostname-ip>:port/select.php?session="+session, method: "GET", dataType: "JSON", success: function(data){ 
 /* You only get here if select.php finnish the transaction */
/* generate PDF ....*/
}

And also. I can't seem to include images from my local folder to the HTML using pdf.fromData for example

Now that you have both code-bases (server, mobile) are separated you can try two options: