Javascript 循环遍历php/laravel中的集合，并将每次迭代中的一项添加到jsPDF捆绑文档中

我从数据库中获取一组图像。我想把它们都放在一个jsPDF文档中，让用户在一个漂亮的pdf捆绑文档中创建一个pdf文件

如何循环浏览整个雄辩的集合，并将每个文件添加到同一个pdf文件中

我试过什么：

为了消除与图像相关的所有潜在问题，我尝试让它与字符串集合一起工作

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

生成简单a4问候世界的jsPDF代码如下所示：

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

//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')

我希望集合中的每个项目都打印到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（））}

概括起来，可以将我的问题分为两部分：

如何将集合中的元素打印到客户端pdf生成器

如何循环收集并将每个项目打印到jsPDF包中

---

我必须用js中的DOM选择器获取图像吗

这样做的一种干净方法是使用API。如果您不熟悉使用API传递集合的json表示，我建议您查看Vue.js（或类似的东西）以获得干净的解决方案

一个肮脏而快速的解决方法与此类似：（请注意，您可能必须更改

doc.text（..，10，10）

）中的数字）

$（#pdfButton”）。在（“单击”，函数（）上{
var doc=new jsPDF（）
var collectionItems={{json_encode（$collection）}；
$.each（集合项、函数（索引、值）{
文档文本（值，10，10）
});
文件保存（'a4.pdf'）

我确实通过如下方式选择DOM元素解决了这个问题：

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

//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')

---

您必须显示您正在使用的整个控制器和刀片文件。否则我们无法解决问题。谢谢！我想我需要进入vue…我现在正在资源中使用app.js文件，然后构建它。从那里开始，var collectionItems={{json_encode（$collection）}；不起作用..请不要使用

var collectionItems={{json_encode（$collection）}；

尝试使用

var collectionItems=；

。请注意，这只在刀片文件中起作用。