使用 html2canvas 和 jsPDF 保存页面的 PDF

Question

我想从 div 的内容创建一个 PDF。我正在使用 jsPDF. The problem is none of my styles are passed, thus the PDF looks off. I then came across an article that uses 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

Use html2canvas with jsPDF to save a PDF of a page

javascript

html2canvas

jspdf