jsPDFでhtml2canvasを使用してページのPDFを保存する

Question

divの内容からPDFを作成したいと思います。私はjsPDFを使用しています。問題は、私のスタイルのどれもが渡されないため、PDFが見えることです。私はその後、を使ってページのスクリーンショットを撮るarticleを見つけました。

私は例をみてください、それは私にこのエラーが発生します提供：

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

どのように私はこの問題を解決するのですか？

(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 
    }); 
} 

}()); 

Answer 1

私がコメントで言ったように、私のCSSを削除しても問題が解決します。ここでは

は、私が使用していますJSです。 @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からこのコードを削除するのではなく、単にインラインスタイルを使ってオーバーライドしても問題ありません。