Question

我已经在这方面工作了几天而无处可去......

我们有一本纸质书籍，我们正在尝试将其数字化并添加交互性（该书有一些可以填写的字段，等等）。我们的想法是，我们将每个页面作为一个幻灯片放在Bootstrap轮播中，然后让用户在页面之间切换并填写文本框。到目前为止一切顺利，这部分工作正常。

现在我们还需要能够将填好的页面导出或保存为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轮播生成的'slid.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打开的情况下运行此函数进行了一定程度的修复，因此图像大小实际上更接近正确的大小，并且发生了更少的下采样。</ p>

将Bootstrap Carousel保存为PDF

1 个答案: