Question

我想从div的内容创建PDF。我正在使用jsPDF。问题是没有我的样式被传递，因此PDF看起来。然后我遇到article使用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中删除此代码，它可以正常工作！

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

1 个答案: