使用html2canvas和jsPDF来保存页面的PDF

Question

我想从div的内容创建一个PDF.我正在使用jsPDF.问题是没有我的样式被传递,因此PDF看起来.然后我看到一篇文章使用html2canvas来截取页面.

当我尝试提供的示例时,它给了我这个错误:

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

}());

Answer 1

正如我在评论中所说，删除 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 中删除此代码，并且效果很好！