将引导程序旋转木马保存为PDF

Question

我已经做了几天了，但一无所获。。。

我们有一本纸质书，我们正在尝试将其数字化并添加交互性(书中有一些可以填写的字段等)。我们的想法是，我们将每一页作为一张幻灯片放在引导转盘中，然后让用户在页面之间切换并填写文本框。到目前为止还不错，这个部分基本上运行良好。

现在我们还需要能够将填写好的页面导出或保存为PDF。我已经用jsPDF和html2canvas尝试了很多东西，但似乎都没有正确运行。我在用Javascript编程方面相对来说是个新手。我有两个问题：

1) 如果我一次只转换旋转木马的一张幻灯片，那么输出的PDF看起来很糟糕。质量真的很低，有很多人工制品。我不知道如何使输出忠实于屏幕上显示给用户的内容。

将一张幻灯片转换为PDF的代码：

html2canvas(document.getElementById('pg'+i), {
onrendered: function(canvasObj) {
var pdf = new jsPDF();
var image = canvasObj.toDataURL("image/png");
pdf.addImage(image, "png", 0, 0, 210, 297);
}
});

2) 如果我试图将旋转木马的多张幻灯片转换为多页PDF，我会遇到很多无法阅读幻灯片的错误。我怀疑只有当幻灯片和幻灯片的内容当前处于活动状态并且在屏幕上可见时，它才能读取这些内容。

用于将多张幻灯片转换为单个多页PDF:的代码

var pdf = new jsPDF();
for (var i=1;i<=16;i++) {
$('#bookCarousel').carousel(i);
html2canvas(document.getElementById('pg'+i), {
onrendered: function(canvasObj) {
var image = canvasObj.toDataURL("image/png");
pdf.addImage(image, "png", 0, 0, 210, 297);
if (i < 16) {pdf.addPage();}
console.log(i);
}
});
}
pdf.save('booklet.pdf');

有什么建议可以解决这个问题或明显的错误迹象吗？(或者实现这一目标的另一种更好的方式？)

Answer 1

为了防止这对其他人有帮助，2)的正确答案不是使用Promises，而是收听Bootstrap carousel生成的"slide.bs.carousel"事件，以便您知道幻灯片何时完成。

var pdf = new jsPDF('p', 'mm', 'a4');
var pagenum = 1;
$('#bookCarousel').on('slid.bs.carousel', function () { //After each slide
var pg = document.getElementById("pg"+pagenum.toString());
//Set up the canvas on the page/div
html2canvas(pg, {width:pg.scrollWidth, height:pg.scrollHeight, logging:false})
.then(function(canvas){
var imgData = canvas.toDataURL();
pdf.addImage(imgData, 'PNG', 0, 0);
//Assuming there are 16 pages in total
if (pagenum<16) {
pdf.addPage()
pagenum++;
slideCarousel(pagenum); //Slide to the next page
} else {
//Save the book, turn off the event listener
pdf.save("booklet.pdf")
$('#bookCarousel').off('slid.bs.carousel');
};
});
});
slideCarousel(pagenum); //Start it all off

1) 通过在不打开Inspect Element的情况下运行此函数，可以在一定程度上修复，这样图像大小实际上更接近正确的大小，并且减少了下采样。