html2canvas - 是否可以将隐藏的 DIV 打印为 pdf？答案

【问题标题】：html2canvas - is there to print a hidden DIV to pdf?html2canvas - 是否可以将隐藏的 DIV 打印为 pdf？
【发布时间】：2019-04-18 20:31:22
【问题描述】：

背景

我有一个记录表，它使用“制表符”控件允许用户进行排序、过滤等。一旦他们在表格中获得了他们想要的结果，我需要为用户提供一种方法，使用 PDF 模板触发每行创建 PDF。在页面顶部，我有一个下拉菜单，他们可以在其中选择模板。例如，它会有这样的选项：

带有蓝色徽标的pdf
带有粉色徽标的pdf

等等

我知道该怎么做： 1.我知道如何在jquery中循环遍历我的表中的选定记录 2.我知道如何创建一个基本的jsPDF文档。 3.“模板”机制只是网页中预定义的两种不同。根据他们在下拉列表中选择的选项，我可以确定要包含的徽标。

问题

似乎除非包含在 PDF 中的 DIV 可见，否则 html2canvas 将无法工作。

到目前为止，这是我一直在玩的原型代码：（除了我试图在屏幕上显示 PDF 的 DIV 之外，其他一切都有效。）

<div id="bluetemplate" class="ug_logo_style" style="display: none">
    <img class="bluelogo"></img>
</div>
<div id="pinktemplate" class="ug_logo_style" style="display: none">
    <img class="pinklogo"></img>
</div>

$("#templatedropdown").change(function(){
   var selectedtemplate = this.value;
   switch (selectedtemplate){
        case 'blue':
            $("div#bluetemplate").show();
            $("div#pinktemplate").hide();
            break;
        case 'pink':
            $("div#pinktemplate").show();
            $("div#bluetemplate").hide();
            break;
   }
});

$("#btntemplate").click(function(){
    switch($('#template option:selected').val()){
        case 'blue':            
            var imgData;
            html2canvas($("#bluetemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape', 
                        unit:'pt', 
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);                   
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
        case 'pink':
            var imgData;
            html2canvas($("#pinktemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape', 
                        unit:'pt', 
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);                   
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
    }

【问题讨论】：

标签： javascript jquery jspdf html2canvas

【解决方案1】：

您是否尝试将其添加到您的 css 中

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

有关打印隐形内容的问题，请参考here。

【讨论】：