通过jsPDF的addHTML将多个元素添加到PDF

我正在使用angular-ui tabset来显示几个单独的信息位。由于未激活的选项卡的实际内容是隐藏的，因此如果我只是添加页面的整个主体，则不打印。您在打印后看到的唯一标签内容是当前活动的选项卡。我试图使用addHTML方法将这些选项卡内的所有内容与页面中的另一个元素一起打印，以保留它的外观。通过jsPDF的addHTML将多个元素添加到PDF

打印其中任何一个单独运作良好，但我似乎无法找到一次打印所有项目的方法。

例如，这是用于打印单个元素的代码。

var pdf = new jsPDF('p', 'pt', 'a4'); 
pdf.addHTML($('#foo').first(), function() { 
    pdf.save(); 
});

这工作（虽然输出为全黑，但我想这是另外一个问题）。现在，我想有几个addHTML语句来完成添加我需要的内容，然后保存。类似于

var pdf = new jsPDF('p', 'pt', 'a4'); 
pdf.addHTML($('#foo').first()); 
_.each($('.bar').first().children(), function(e) { 
    pdf.addHTML(e); 
}); 
pdf.save();

但是，采用第二种方法保存pdf时，它完全空白。

值得一提的是这个作品，但它并没有我想保持和有更多的内容不是我想要的格式：

var doc = new jsPDF(); 

    doc.fromHTML($('body').get(0), 15, 15, { 
    'width': 170, 
    }, function() { 
    doc.save(); 
    });

试图迫使其选择只是#foo和.bar最终出现同样的问题，我已经在上面。

任何建议，正确的方式来做到这一点将不胜感激。

来源

2014-10-07 Linell

亚当的答案从来没有为我工作，出于某种原因或另一个原因。相反，我采取了创建新的div的方法，将所有的东西附加到它上面，打印出来，然后摧毁它。这可以通过这些方针的东西来完成：

 var pdf = new jsPDF('p','pt','letter'); 

     $("#printing-holder").append("<div id='printingDiv' style='background-color: white;'></div>"); 
     ($('#foo')).clone().appendTo("#printingDiv"); 
     _.each($('.bar').children(), function(e) { 
     $("#printingDiv").append('<br/>'); 
     $(e).clone().appendTo("#printingDiv"); 
     $("#printingDiv").append('<br/>'); 
     }); 
     pdf.addHTML(($("#printingDiv")[0]), {pagesplit: true}, function() { 
     console.log("THING"); 
     pdf.save(); 
     $("#printingDiv").remove(); 
     });

注意，pagesplit选项分割图像，如果它是大于一个页面，但（因为这个答案的日期）似乎大大降低质量的PDF生成。

来源

2014-10-08 19:48:59 Linell

嗨@Linell，我试过你的方法，但我得到'ReferenceError：CanvasRenderer没有在renderWindow中定义'。我猜测这是由于一些缺失的依赖js。你能不能指出我需要包含的正确的js文件来使这个工作起作用？ PS：我的页面有很多我想要发布到我创建的PDF的画布元素。 – 2015-10-23 12:56:18

在addHTML回调之外调用pdf.save()很可能会在addHTML方法有机会添加html之前创建pdf。尝试是这样的：

未测试

var pdf = new jsPDF('p', 'pt', 'a4'); 
var elements = $(".bar"); 
var i = 0; 
var recursiveAddHtml = function() { 
    if (i < elements.length) { 
     var x = 0, y = i * 20; 
     pdf.addHTML(elements.get(i), x, y, function() { 
      i++; 
      recursiveAddHtml(); 
     }); 
    } else { 
     pdf.save(); 
    } 
} 

recursiveAddHtml();

这应该叫recursiveAddHtml每个元素，一次一个，然后调用save当它到达终点。

更新

我只是尝试了这一点，似乎工作，但它定位在彼此之上的所有元素。我不确定如何检测当前PDF格式的内容的高度，因此我在示例中添加了x和y坐标，以便至少可以看到PDF中的不同元素。

此外，请确保您设置的背景颜色为东西，否则它默认为黑色。

来源

2014-10-07 21:16:02 adam0101

嗯......我认为你在那里有正确的想法，但是我的'pdf.save（）'实际上从未被调用过。我的'elements.length'是5，*但是* recursiveAddHtml函数中只有一个console.log输出三次。看看它的这个图像http://imgur.com/DntH44M（和代码https://gist.github.com/Linell/c0521f5dde8a59239e99的这个要点） – Linell 2014-10-07 22:50:52

是当关于picture001.jpg的错误被抛出？如果该映像驻留在其他服务器上，则可能会出现安全错误，从而阻止添加其他元素。 – adam0101 2014-10-08 13:57:34

我想过那个，*但是*这也是在第一对夫妇中引发的，它并没有阻止它。 – Linell 2014-10-08 14:26:53

通过jsPDF的addHTML将多个元素添加到PDF

回答

相关问题