代码之家 › 专栏 › 技术社区 › Brainmaniac

从php/laravel循环集合,并将每个迭代中的一个项添加到JSPDF捆绑文档中

jspdf laravel php javascript

1

Brainmaniac · 技术社区 · 8 年前

我从数据库中得到了一组图片。我想把它们放在一个JSPDF文档中,让用户在最后创建一个PDF文件,所有图像都放在一个漂亮的PDF捆绑文档中。

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

我试过什么:

为了消除与图像相关的所有潜在问题,我试图让它与一组字符串一起工作。

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

生成一个简单的A4语言“hello world”的jsfd代码如下所示:

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())

总结一下,我的问题可以分为两部分:

如何将集合中的元素打印到客户端PDF生成器?
如何循环访问集合并将每个项打印到JSPDF包。

我需要用JS中的DOM选择器获取图像吗?

2 回复 | 直到 8 年前

1

tprj29 8 年前

要做到这一点,一个干净的方法是使用API。如果您不熟悉如何使用传递集合JSON表示形式的API,我建议您查看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>

2

1

Brainmaniac 8 年前

我是通过选择如下的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')