使用html2canvas與jsPDF保存頁面的PDF

我想從div的內容創建一個PDF。我正在使用jsPDF。問題是沒有我的樣式被傳遞，因此PDF看起來。然後我碰到一個article，它使用html2canvas截取頁面的屏幕截圖。使用html2canvas與jsPDF保存頁面的PDF

當我嘗試提供的示例中它給了我這個錯誤：

uncaught exception: Invalid orientation: [object object] <unknown>

我該如何解決這個問題？

這裏是我用JS：

(function(){ 
var content = $('#content'), 
    cache_width = content.width(), 
    a4 =[ 595.28, 841.89]; // for a4 size paper width and height 

$('#pdf').on('click',function(){ 
    $('body').scrollTop(0); 
    createPDF(); 
}); 
//create pdf 
function createPDF(){ 
    getCanvas().then(function(canvas){ 
     var 
     img = canvas.toDataURL("image/png"), 
     doc = new jsPDF({ 
      unit:'px', 
      format:'a4' 
     });  
     doc.addImage(img, 'JPEG', 20, 20); 
     doc.save("{{this.['Student Last Name']}}-{{this.['Student Name']}}-umpire-incident-report.pdf"); 
     content.width(cache_width); 
    }); 
} 

// create canvas object 
function getCanvas(){ 
    content.width((a4[0]*1.33333) -80).css('max-width','none'); 
    return html2canvas(content,{ 
     imageTimeout:2000, 
     removeContainer:true 
    }); 
} 

}());

來源

2016-01-01 L84

@Kaiido - 即使我定義方向，它也不能解決問題。 – L84

can not repro：http://jsfiddle.net/qzLwh2bb/ – Kaiido

@Kaiido - 這是在我的CSS。我刪除了樣式表，它的工作原理。把它加回來，它會中斷。 – L84

正如我在評論說，除去我的CSS解決問題。正如@Kaiido所指出的那樣，html2canvas沒有實現一些CSS。

我在我的樣式表下面的CSS：

hr{ 
    border: 0; 
    height: 1px; 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0))); 
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%); 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%); 
    margin:1rem 0; 
    padding:0 !important; 
}

當我刪除的梯度，它完美的罰款。不用從我的CSS中刪除這些代碼，我可以簡單地使用內聯樣式進行覆蓋，並且它工作正常！

來源

2016-01-01 05:01:22 L84

使用html2canvas與jsPDF保存頁面的PDF

回答

相關問題