在下载 pdf 之前在 table 中制作 div 内容

Question

我在这里尝试制作 pdf，当用户单击按钮时，我需要将所有 div 内容放入 table（不需要图像）并下载为 PDF。 click here for my example。在示例中，我使用 table。其实我想在pdf中制作table。

JS

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

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

Answer 1

该示例只需将 <table class="table" id="tablepdf"> 更改为 <table class="table" id="content"> 即可完成。

JSFiddle updated

如果您的需求不同，请说明。

Answer 2

http://www.cloudformatter.com/css2pdf supports many CSS styles and structures including tables. As stated in the comments above, it is not jsPDF but is it's own rendering solution. Your document in this fiddle (http://jsfiddle.net/wL8r6n05/2/) 将其显示为 table 而不是其他格式。只需使用这个：

$('#cmd').click(function () {
    return xepOnline.Formatter.Format('printme',{render:'download'});
});

根据您的第二条评论，您也可以在 HTML 中隐藏数据，并且仅通过 @media 打印命令公开它。这在第二个 fiddle (http://jsfiddle.net/wL8r6n05/5/) 中显示，其中 table 周围的 div 仅针对 @media 打印样式公开：

.hidden {
    display:none;
}
@media print {
    .hidden {
        display:block;
    }
}

它支持在发送到格式化程序之前对内容应用@media print CSS 样式。

在下载 pdf 之前在 table 中制作 div 内容

Make div content in table before downloading pdf

javascript

jquery

html

pdf-generation

jspdf