Utilizzare html2canvas con jsPDF per salvare un PDF di una pagina

Question

Voglio creare un PDF dal contenuto di un div. Sto usando jsPDF. Il problema è che nessuno dei miei stili è passato, quindi il PDF sembra fuori. Mi sono imbattuto in un article che utilizza html2canvas per fare uno screenshot della pagina.

Quando provo l'esempio fornito mi dà questo errore:

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

Come posso risolvere questo problema?

Ecco il JS che sto usando:

(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

Come ho detto in un commento, rimuovendo il mio CSS risolve il problema. Come ha sottolineato @Kaiido, html2canvas non ha implementato alcuni CSS.

Ho il seguente CSS nel mio foglio di stile:

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

Quando rimuovo i gradienti, funziona perfettamente bene. Invece di rimuovere questo codice dal mio CSS, posso semplicemente sovrascrivere usando gli stili in linea e funziona perfettamente!