Проходить по коллекции из php / laravel и добавлять один элемент из каждой итерации в пакетный документ jsPDF - PullRequest
Новая
       8

Проходить по коллекции из php / laravel и добавлять один элемент из каждой итерации в пакетный документ jsPDF

0 голосов
/ 11 сентября 2018

Я получаю коллекцию изображений из моей базы данных. Я хочу поместить их все в один документ jsPDF, чтобы пользователь мог на конце создать файл PDF со всеми изображениями в одном прекрасном документе в формате PDF.

Как я могу просмотреть всю коллекцию eloquent и добавить каждый файл в один и тот же pdf-файл?

Что я пробовал:

Чтобы устранить потенциальные проблемы со всем, что связано с изображениями, я попытался заставить его работать с коллекцией строк. 

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

Код jsPDF для генерации простого a4 со словами hello world выглядит примерно так: 

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

Я хочу, чтобы каждый элемент коллекции печатался в формате PDF.

Итак, у меня в клинке: 

{{ $collection }}

и затем, чтобы начать, я попытался получить только первый элемент в коллекции для печати сценария: 

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

очевидно, что это рендеринг PDF с этим напечатанным:

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

Подводя итог, можно разбить мой вопрос на две части:

  1. Как распечатать элементы из моей коллекции в генератор PDF на стороне клиента?

  2. Как я могу пройтись по коллекции и распечатать каждый элемент в комплекте jsPDF.

Придется ли мне получать изображения с помощью DOM-селекторов в js?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Я решил, выбрав DOM-элементы следующим образом: 

//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')
0 голосов
/ 11 сентября 2018

Чистым способом сделать что-то подобное было бы использование API.Если вы не знакомы с использованием API, передающего представление коллекции в формате json, я бы порекомендовал посмотреть на Vue.js (или что-то подобное) для чистого решения.

Грязное и быстрое исправление будет выглядеть примерно так: (обратите внимание, что вам, возможно, придется изменить числа в 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>
...