如何使用 jquery 将打印结果作为 PDF 结果答案

【问题标题】：How to get the print as PDF result using jquery如何使用 jquery 将打印结果作为 PDF 结果
【发布时间】：2016-09-09 11:36:15
【问题描述】：

我想获取 PDF 格式的 HTML 页面。

经过一番研究，我发现pdfJS插件，它与bootstrap有些问题，布局会很乱

http://jsfiddle.net/5ud8jkvf/

这是小提琴

我发现默认打印为 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。

需要转换成PDF的HTML只有一页的申请表，非常感谢

【问题讨论】：

有什么进展吗？我也需要同样的要求
您能否在问题图片中包含html？
@user782104 你能指定你在使用 bootstrap 和 jstopdf 时遇到的问题吗

标签： javascript jquery html css pdf

【解决方案1】：

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

var myBlob;

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

【讨论】：

【解决方案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。如果您想了解更多信息，请检查链接。

【讨论】：

【解决方案3】：

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

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

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

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

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

我已经在我们的应用程序中使用了它，它不会与引导程序产生任何冲突。

【讨论】：

【解决方案4】：

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

【讨论】：