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

Posted 2023-02-24

【中文标题】如何使用 jquery 将打印结果作为 PDF 结果

【英文标题】：How to get the print as PDF result using jquery

【发布时间】：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 时遇到的问题吗

【参考方案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