jQuery 使用带有格式化表格数据的 jsPDF 创建 pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23018171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create pdf using jsPDF with formatted Table data
提问by user3428816
I am able to generated PDF file from html table using this below script: But I am getting all the columns data are line by line.
我可以使用以下脚本从 html 表生成 PDF 文件：但我正在逐行获取所有列数据。
Please help me to generate PDF file as a tabular formatted way.(with column border, margin or padding, headers ) in this script
请帮助我以表格格式的方式生成 PDF 文件。（带有列边框、边距或填充、标题）在此脚本中
I am used jsPDF lib script to generate a html table to PDF .
我使用 jsPDF lib 脚本生成一个 html 表到 PDF 。
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#TableId')[0]
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
return true
}
}
, margins = {
top: 20,
bottom: 20,
left: 30,
width: 922
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
)
EDIT:
编辑：
I have tried this samplebelow function too, but I am getting just empty pdf file.
我也尝试过这个函数下面的示例，但我得到的只是空的 pdf 文件。
function exportTabletoPdf()
{
var doc = new jsPDF('p','pt', 'a4', true);
var header = [1,2,3,4];
doc.table(10, 10, $('#test').get(0), header, {
left:10,
top:10,
bottom: 10,
width: 170,
autoSize:false,
printHeaders: true
});
doc.save('sample-file.pdf');
}
采纳答案by Vinu
You have to use something like -- doc.setLineWidth(2);
你必须使用类似 -- doc.setLineWidth(2);
for line border.. Please look the following for sample code
对于线边框..请查看以下示例代码
回答by Oscar Acevedo
I spent a lot of time looking for a good representation of my tables, then I found this plugin (https://github.com/simonbengtsson/jsPDF-AutoTable), It works great, includes themes, rowspan, colspan, extract data from html, works with json, you can also personalize your headers and make them horizontals.
The image below is an example:
我花了很多时间寻找我的表格的良好表示，然后我找到了这个插件（https://github.com/simonbengtsson/jsPDF-AutoTable），它工作得很好，包括主题，行跨度，colspan，从中提取数据html，与json一起使用，您还可以个性化您的标题并使它们水平。下图是一个例子：
回答by Ali Mohammad Fawzi
Try removing last argument "true" from this method:
尝试从此方法中删除最后一个参数“true”：
var doc = new jsPDF('p','pt', 'a4', true);
回答by Lokesh Das
Export html div content including both plain text and table data using jspdf include script https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js
使用 jspdf 导出包含纯文本和表格数据的 html div 内容包含脚本https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js
function download_DIVPdf(divid) {
var pdf = new jsPDF('p', 'pt', 'letter');
var pdf_name = 'PostMode-'+om+'.pdf';
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
htmlsource = $('#'+divid)[0];
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
htmlsource, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save(pdf_name);
}, margins);
}
回答by Vijay M
$(".gridview td").each(function () {
var value = $(this).html();
doc.setFontSize(8);
if (count == 1) {
if (height > 278) {
doc.rect(10, inc, 24, 8);
doc.rect(34, inc, 111, 8);
doc.rect(145, inc, 15, 8);
doc.rect(160, inc, 20, 8);
doc.rect(180, inc, 23, 8);
doc.addPage(focus);
doc.setLineWidth(0.5);
inc = 15;
height = 18;
}
doc.rect(10, inc, 24, 8);
doc.text(value, 11, height);
}
if (count == 2) {
doc.rect(34, inc, 111, 8);
var splitdesc = doc.splitTextToSize(value, 100);
doc.text(splitdesc, 35, height);
}
if (count == 3) {
doc.rect(145, inc, 15, 8);
doc.text(value, 147, height);
qty = value;
}
if (count == 4) {
doc.rect(160, inc, 20, 8);
doc.text(value, 163, height);
amt = value;
}
if (count == 5) {
doc.rect(180, inc, 23, 8);
tot = parseInt(qty) * parseFloat(amt);
doc.text("" + tot, 182, height);
count = 0;
height = height + 8;
netamt = netamt + parseFloat(tot);
inc = parseInt(inc) + 8;
doc.rect(10, inc, 24, 8);
doc.rect(34, inc, 111, 8);
doc.rect(145, inc, 15, 8);
doc.rect(160, inc, 20, 8);
doc.rect(180, inc, 23, 8);
}
count = count + 1;
});
