使用 html2canvas 和 jsPDF 保存页面的 PDF答案

【问题标题】：Use html2canvas with jsPDF to save a PDF of a page使用 html2canvas 和 jsPDF 保存页面的 PDF
【发布时间】：2016-04-05 20:05:17
【问题描述】：

我想从 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
    }); 
}

}());

【问题讨论】：

@Kaiido - 即使我定义了方向也不能解决问题。
无法复制：jsfiddle.net/qzLwh2bb
@Kaiido - 这是我的 CSS 中的东西。我删除了样式表，它可以工作。加回来，它坏了。
html2canvas 中没有实现一些 css，在使用addImage() 方法之前可以检查画布的宽度/高度吗？一个活生生的例子也会有所帮助。
@Kaiido - 这很有趣，也很好奇为什么它对我来说会崩溃并且不会出现问题。

标签： javascript jspdf html2canvas

【解决方案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 中删除此代码，它工作正常！

【讨论】：