Loop through collection from php/laravel and add one item from each iteration to a jsPDF bundle document

Question

I get a collection of images from my db. I want to put them all in to one jsPDF document for the user to create the pdf file on their end with all the images in one nice pdf bundle document.

How can I loop through the whole eloquent-collection and add each file to the same pdf-file?

What have I tried:

To remove potential trouble with everything relating to images I have tried to get it to work with a collection of strings.

$collection = collect(['Taylor the king of SaaS', 'Jeff eats free lunches', 'Adam is a bad-ass!']);

The jsPDF code to generate a simple a4 saying hello world looks something like this:

var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

I want each of the items in the collection to print to the pdf.

So in the blade I have:

{{ $collection }}

and then just to get going I tried to get just the first element in the collection to print the script:

$("#pdfButton").on("click", function(){
    var doc = new jsPDF()
    doc.text('{{ json_encode($collection->first()) }}', 30, 30)
    doc.save('a4.pdf')
})

this obviously renders a pdf with this printed:

{{ json_encode($collection->first()) }}

To summerize one could break down my question in to two parts:

1. How to I print elements from my collection to the client side pdf generator?

2. How can I loop through the collection and print each item to the jsPDF bundle.

Will I have to fetch the images with DOM-selectors in js?

Answer 1

A clean way to do something like this would be by using an API. If you not familiar with using an API passing a json representation of the collection I would recommend looking into Vue.js (or something similar) for a clean solution.

A dirty and quick fix would be something similar to this: (note that you may have to change the numbers in doc.text(.., 10, 10) )

<div id='collection-data' data-collection-data='{{json_encode($collection)}}'>

<script type="text/javascript">
$("#pdfButton").on("click", function(){
var doc = new jsPDF()
var collectionItems = {{json_encode($collection)}};
$.each(collectionItems, function( index, value) {
   doc.text(value, 10, 10)
});
doc.save('a4.pdf')
</script>

Answer 2

I did solve it by selecting the DOM-elements like this:

//Creating the PDF
var doc = new jsPDF()

//Getting all the images
var images = $('.my-images').map(function(){
return this.src;
}).get();

//Looping through the images and adding a page for each
var iterations = 1;
images.forEach(function(element) {
    if(iterations > 1){
        doc.addPage();
    }

    var img = new Image();
    //Then just add the url as a attribute
    img.src = element;

    //THEN add the image to the pdf
    doc.addImage(img, 'image/png', 10, 10, 190, 277);

    iterations = ++iterations;
});

doc.save('a4.pdf')