如何使用Javascript将HTML / CSS转换为PDF?

时间:2016-09-15 19:47:27

标签: javascript html css pdf canvas

我查看了jsPDF,但插件在导出的PDF中删除了CSS。我也查看过html2canvas,但它会截取当前窗口的截图。我的HTML内容对用户是隐藏的,我正在寻找一种可以从HTML块动态创建PDF的解决方案。有什么建议吗?

编辑: 我只是尝试创建html2canvas到jsPDF,但我得到一个空的pdf文档。有人可以告诉我为什么吗? http://jsfiddle.net/5ud8jkvf/6320/

$('.download').on('click', function(){
    html2canvas($('.print'), {
    onrendered: function(canvas) {
        $('#canvas').replaceWith(canvas);
    },
    //width: 200,
    //height: 200
    });
    setTimeout(function(){
        var doc = new jsPDF();
        var specialElementHandlers = {
      '#editor': function (element, renderer) {
          return true;
      }
        };

    doc.fromHTML($('canvas').html(), 15, 15, {
        'width': '200',
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');

    }, 500);
});

1 个答案:

答案 0 :(得分:2)

您是否可以按照以下方式使用html2canvas,隐藏您的html内容并不重要,您应该可以像这样访问它:

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#hiddenElement').html(), function () {
    pdf.save('Test.pdf');
});