【问题标题】:How can I convert HTML/CSS to PDF using Javascript?如何使用 Javascript 将 HTML/CSS 转换为 PDF?
【发布时间】:2017-01-23 23:00:09
【问题描述】:

我查看了 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);
});

【问题讨论】:

标签: javascript html css pdf canvas


【解决方案1】:

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

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

【讨论】:

  • 好的,我试过了——这里是 html2canvas 和 jsPDF 的组合:jsfiddle.net/5ud8jkvf/6320 知道为什么 PDF 返回一个空文档吗?
猜你喜欢
  • 2019-05-11
  • 2017-05-01
  • 2022-12-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-01
  • 1970-01-01
  • 2016-12-06
  • 1970-01-01
相关资源
最近更新 更多