通過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

回答

相關問題