将引导转盘保存为PDF
我已经在这上面工作了几天，但一无所获...
我们有一本纸质书，我们试图将其数字化并增加交互性(这本书有一些可以填写的字段，等等)。我们的想法是将每个页面作为一张幻灯片放在Bootstrap carousel中，然后让用户在页面之间切换并填写文本框。到目前为止，这一部分工作得很好。
现在我们还需要能够将填写好的页面导出或保存为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');有没有什么建议可以解决这个问题，或者有什么明显的错误迹象？(或者是实现这一目标的另一种更好的方法？)
回答 1
Stack Overflow用户
发布于 2018-01-09 12:59:47
为了防止这对其他人有帮助，事实证明2)的正确答案不是使用Promises，而是监听由引导转盘生成的'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 off1)通过在未打开Inspect元素的情况下运行此函数进行了某种程度上的修复，因此图像大小实际上更接近于正确的大小，并且发生的下采样较少。
https://stackoverflow.com/questions/47172329
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号