How to show Images in multiple pages of single pdf using JSpdf Dynamically in php codeigniter

Viewed 17

After alot of Search on show images on multiple pages on single pdf using php codeigniter:-

Here is the simple solution of my this problem in php codeigniter.

1-Add Script after <head> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

2-Add <a href></a> tag call the function > generatePdf

<a href="javascript:generatePDF()">Dowload PDF</a></div> 

3-set div with dynamic id's

<div id="html2pdf_<?php echo  $reg['id']; ?>">

4-start a <script> define fuction generatePdf

<script>   
function generatePDF() {}
</script>

5-create doc new jspdf

var doc = new jsPDF();

6-define page height and x,y coordinates

pageHeight= doc.internal.pageSize.height;
        x=15; y = 0 ;

7- Create variable image of new image

  var img = new Image();

8-Add imag.src of your image set dynamically get from db using call to usermodel in php codeigniter.

img.src = '<?php echo $this->user_model->get_registration_image($reg['id']); ?>';

9-the get_registration_image function is define in your usermodel to get image of individual from db like that:

// Get Registration Image Starts
    public function get_registration_image($user_id) {
        if (file_exists('uploads/registration/'.$user_id.'.jpg'))
        return base_url().'uploads/registration/'.$user_id.'.jpg';
        else
        return base_url().'uploads/registration/placeholder.jpg';
    }
    // Get Registration Image Ends

10-Add Image Function where parameters (image.src,format,x(x_coordiante),y(y_coordinate))

doc.addImage(img, 'image/png', x,y);

11-call the div tag by user id dynamically where instruction populate from db :

<?php foreach($registration as $reg){?>
var img = new Image();
img.src = '<?php echo $this->user_model->get_registration_image($reg['id']); ?>';
doc.addImage(img, 'image/png', x,y);
doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
'width': 170
 }),
<?php } ?>

12-Save the doc in Download Folder

doc.save("CallLetters.pdf");

13- Now add the multiple pages in one pdf:

if (y >= pageHeight)
{
doc.addPage();
}

14- Complete Code:

<script>   

    function generatePDF() {
            var doc = new jsPDF();
            pageHeight= doc.internal.pageSize.height;
            x=15; y = 0 ;
    <?php foreach($registration as $reg){?>
    if (y >= pageHeight)
    {
    doc.addPage();
    y = 0 ;x=100;
    var img = new Image();
    img.src = '<?php echo $this->user_model->get_registration_image($reg['id']); ?>';
    doc.addImage(img, 'image/png', x,y);
    x=15;
    doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
    'width': 170
     }),
    y=500;
    }
    else{
        var img = new Image();
        x=100;
    img.src = '<?php echo $this->user_model->get_registration_image($reg['id']); ?>';
    doc.addImage(img, 'image/png', x,y);
    x=15;
    doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
    'width': 170
    }),
    y=500;
    }<?php } ?>
    doc.save("CallLetters.pdf");         
    }
    </script>
0 Answers
Related