jsPDF addHTML獲取滾動元素的全部內容

如何讓jsPDF從具有溢出設置的元素創建圖像/ pdf，以便它具有滾動條。粘貼到addHTML下面的例子有一個播放頁面（http://mrrio.github.io/jsPDF/）將只產生所顯示的div部分PDF文件，即使我選擇了「中間」的div：jsPDF addHTML獲取滾動元素的全部內容

var outer = document.createElement('div'); 
outer.style.height = "100px"; 
outer.style.overflow = "scroll"; 

var middle = document.createElement('div'); 

for (var i=0; i<35;i++) { 
    var inner = document.createElement('div'); 
    inner.style.border = "thick solid #0000ff"; 
    inner.style.padding = "10px"; 

    middle.appendChild(inner); 
} 

outer.appendChild(middle); 
document.body.appendChild(outer); 

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

pdf.addHTML(outer,function() { 
    var string = pdf.output('datauristring'); 
    $('.preview-pane').attr('src', string); 
});

（基本上，這正在創建一個帶有滾動條的div，在裏面添加一個div，然後在中間添加一大堆div，足夠滾動屏幕，所以pdf不會提取它，我想彈出一個新的窗口，但如果我這樣做，我必須找出所有不同的樣式表來拉進了彈出式視窗）

來源

2015-12-02 curmudgeon

在此討論看看：https://github.com/MrRio/jsPDF/issues/270：

我使用html2canvas.js的addHtml（）方法來製作pdf，但對於大數據表，它不會生成pdf，對於短內容會很好。請幫我在這裏是我的代碼

爲了這弗拉門戈回覆：

我開始在功能分手長HTML網頁的工作。

試試這個： https://rawgit.com/Flamenco/jsPDF/text-html-table-page-break/examples/html2pdf/test-long-html-table.html

示例代碼創建一個長桌上，並用它產生的PDF。也許他的設置對你有用。

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Long Table</title> 
    </head> 

<script src='../../libs/require/require.js'></script> 
<script> 
require_baseUrl_override = '../../'; 
require(['../../libs/require/config'], function(){ 
require(['jspdf.plugin.canvas', 'libs/html2pdf', 'libs/html2canvas/dist/html2canvas', 'libs/saveas'], function(){ 

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

// Enable auto page wrap (there are still margin-top issues...) 
pdf.context2d.pageWrapY = pdf.internal.pageSize.height-20; 

// create a long table 
var table = document.createElement('table'); 
for (var i=1; i<1000; i++){ 
    var tr=document.createElement('tr'); 
    var td=document.createElement('td'); 
    td.innerHTML = "Item " + i; 
    tr.appendChild(td); 
    table.appendChild(tr); 
} 
document.body.appendChild(table); 

// render body to pdf 
html2pdf(document.body, pdf, function(){ 
    pdf.save('Test.pdf'); 

}); 

}); // require 
}); // require 
</script> 

    <body> 
    </body> 
</html>

該代碼有點損壞，但它的工作原理。

來源

2016-03-22 18:49:15

jsPDF addHTML獲取滾動元素的全部內容

回答

相關問題