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

Question

我从我的数据库中获取了一组图像。我想将它们全部放入一个 jsPDF 文档中，以便用户在他们的末端创建 pdf 文件，并将所有图像放在一个漂亮的 pdf 捆绑文档中。

如何遍历整个 eloquent-collection 并将每个文件添加到同一个 pdf 文件？

我尝试了什么:

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

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

生成简单的 a4 saying hello world 的 jsPDF 代码如下所示:

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

我希望集合中的每个项目都打印成 pdf。

所以在 Blade 中我有:

{{ $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 包。

我必须在 js 中使用 DOM 选择器获取图像吗？

Answer 1

执行此类操作的一种简洁方法是使用 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>