changed values not showing after PDF conversion with wkhtmltopdf

Question

Currently inside my html page I change some values, the way it works is like this:

The function:

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}

The values that get changed and the textfield used for input:

      Voornaam: <h3 class="title1">Kevin</h3>
      <input type="text" id="myTextField1"/>
      <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

      <p class="title1">Test.</p>

And I convert using wkhtmltopdf, which is a command line tool for html to PDF conversion. However the changes I make are ofcourse not done on the server but locally, and this is why my changes do not show in my conversion.

I was thinking about downloading the changed html page first and then convert it with wkhtmltopdf. Would anybody be able to give me an example of how this could be done or perhaps some me another and better way?

Answer 1

You have to send over the page content and the wkhtmltopdfon the server will do the job.

On the client side you need to all a function like this:

function send(){ 
  var f = document.createElement("form"),
     i = document.createElement("input"); //input element, hidden

  f.setAttribute('method',"post");
  f.setAttribute('action',"http://yourserver.com/script.php");

  i.setAttribute('type',"hidden");
  i.setAttribute('name',"content");
  i.setAttribute('value', document.body.innerHTML); // or the container you need

  f.appendChild(i);
  document.getElementsByTagName('body')[0].appendChild(f);
  f.submit();
};

On the server side, in php for example, you will get the content, save it on temp file and then call the tool to convert it to pdf and then return the pdf to the client:

<?php
try {
   $content = $_REQUEST['content'];
    if(!file_exists('/tmp') ){
       mkdir('/tmp', 0777);
    }
   $fp = fopen('w+','/tmp/tmp.html');
   if($fp){
     fwrite($fp, $content);
     fclose($fp);

     $filename = '/tmp/out_' . time() .'.pdf'; // output filename
     shell_exec('wkhtmltopdf /tmp/tmp.html ' . $filename);

     //then eventually ask user for download the result
     header("Content-type:application/pdf");

     // It will be called output.pdf
     header("Content-Disposition:attachment;filename='output.pdf'");

    readfile($filename);
  }else{
     echo 'html file could not be created';
  }
} catch (Exception $e) {
  echo 'exception: ',  $e->getMessage(), "\n";
}