Question

我想在PDF中获取HTML页面。

经过一些研究后我找到了pdfJS插件，它有一些bootstrap问题，布局会很乱

这里是小提琴

我发现默认打印为PDF结果很棒

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

所以，我不知道有没有修复pdfJS的问题，我想知道是否有html / jquery方法从pdf中获取pdf格式。

HTML需要转换为PDF只是一页应用程序表单，非常感谢

Answer 1

当前版本允许获取pdf的blob或arraybuffer。您唯一要做的就是从库更新到1.2.x并像这样调用save

var myBlob;

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    myBlob = doc.save('blob');
});

Answer 2

可能你可以尝试html2canvas（它将解析DOM，计算应用的样式）。

(function(){
var 
 form = $('.form'),
 cache_width = form.width(),
 a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#create_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('techumber-html-to-pdf.pdf');
        form.width(cache_width);
 });
}

// create canvas object
function getCanvas(){
 form.width((a4[0]*1.33333) -80).css('max-width','none');
 return html2canvas(form,{
     imageTimeout:2000,
     removeContainer:true
    }); 
}

}());

我发现了here。如果您想了解更多信息，请查看链接。

Answer 3

您似乎正在尝试将表格数据打印为PDF格式。因此您可以使用DataTables jQuery插件。

数据表提供button库，您可以在其中使用PDF按钮。它支持HTML5和Flash以及按钮类型，可在Flash和HTML按钮选项之间自动选择。

$('#myTable').DataTable( {
buttons: [
    'pdf'
]
} );

它也提供excel导出功能，您只需添加excel按钮。

$('#myTable').DataTable( {
buttons: [
    'copy', 'excel', 'pdf'
]
} );

我已经在我们的应用程序中使用过，它不会与bootstrap发生任何冲突。

Answer 4

试试jsPDF-AutoTable (jsPDF plugin)，这可以帮助您根据需要从HTML转换为PDF。查看demo

如何使用jquery

4 个答案: