Javascript 角度6-jsPDF-自动表格-PDF未正确生成
我不知道我哪里做错了(在循环中)。目前,pdf仅使用第一个对象的第一个属性生成。标题也未显示。正在尝试在jsbpdf自动表中加载json响应。暂时,请考虑下面的模拟数据。 到目前为止, 测试.tsJavascript 角度6-jsPDF-自动表格-PDF未正确生成,javascript,angular,typescript,jspdf,jspdf-autotable,Javascript,Angular,Typescript,Jspdf,Jspdf Autotable,我不知道我哪里做错了(在循环中)。目前,pdf仅使用第一个对象的第一个属性生成。标题也未显示。正在尝试在jsbpdf自动表中加载json响应。暂时,请考虑下面的模拟数据。 到目前为止, 测试.ts prepareDoc(){ const header = [['Devloper ID', 'Develoepr Name', 'Department', 'Location', 'Rate(Hr)', 'Current Status', 'Contact']]; const data
prepareDoc(){
const header = [['Devloper ID', 'Develoepr Name', 'Department', 'Location', 'Rate(Hr)', 'Current Status', 'Contact']];
const data = [{
'id': 'xxx-001',
'dev_name': 'qqqqq',
'department': 'ABC',
'loc': 'loc-001',
'hourly_rate': '00',
'current_Status': 'Open',
'contact': '--'
}, {
'id': 'xxx-002',
'dev_name': 'eeeee',
'department': 'DEF',
'loc': 'loc-002',
'hourly_rate': '00',
'current_Status': 'Engaged',
'contact': '--'
}, {
'id': 'xxx-003',
'dev_name': 'rrrrr',
'department': 'IJK',
'loc': 'loc-003',
'hourly_rate': '00',
'current_Status': 'Qued(5)',
'contact': '--'
}, {
'id': 'xxx-004',
'dev_name': 'bbbbb',
'department': 'LMN',
'loc': 'loc-004',
'hourly_rate': '00',
'current_Status': 'Vacction',
'contact': '--'
}];
data.forEach(elm => {
const temp = [elm.id, elm.dev_name, elm.department, elm.loc, elm.hourly_rate, elm.current_Status, elm.contact];
rows.push(temp);
console.log('Rows', rows); // showing all data
});
downloadPDF.autoTable(header, rows);
downloadPDF.save('demo.pdf');
}
html
问题
PFA:pdf生成,无标题和其他数据
请在这方面给我一些帮助您应该使用如下自动表格方法:
downloadPDF.autoTable({
head: header,
body: rows,
});
这对我有好处。我用以下代码进行了检查:
谢谢你的提醒。现在正确生成表。但是单元格与实际的json数据不一致。你能告诉我怎样使用款式吗。我查阅了官方文件,但无法理解我下载了demo.pdf文件。我看到所有数据都是用actual.json呈现的。也许您的代码中有错误?我的意思是,api的json响应的实际属性长度太大。示例
{'thisIsTheExampleProperties':'header的长度太长'}
我想用正确对齐的方式显示header中的长值EDI检查的header值带有1000多个符号,并且pdf呈现良好(header大约有4页)。也许问题出在代码的另一部分?请创建一个代码笔示例好吗?使用字符串concatation而不是逗号const temp=[elm.id+elm.dev_name+elm.department+elm.loc+elm.hourly_rate+elm.current_Status+elm.contact]代码>替换为const temp=[elm.id,elm.dev\u name,elm.department,elm.loc,elm.hourry\u rate,elm.current\u Status,elm.contact]代码>
downloadPDF.autoTable({
head: header,
body: rows,
});
const downloadPDF = new jsPDF();
function prepareDoc() {
const header = [['Devloper ID', 'Develoepr Name', 'Department', 'Location', 'Rate(Hr)', 'Current Status', 'Contact']];
const rows=[];
const data = [{
'id': 'xxx-001',
'dev_name': 'qqqqq',
'department': 'ABC',
'loc': 'loc-001',
'hourly_rate': '00',
'current_Status': 'Open',
'contact': '--'
}, {
'id': 'xxx-002',
'dev_name': 'eeeee',
'department': 'DEF',
'loc': 'loc-002',
'hourly_rate': '00',
'current_Status': 'Engaged',
'contact': '--'
}, {
'id': 'xxx-003',
'dev_name': 'rrrrr',
'department': 'IJK',
'loc': 'loc-003',
'hourly_rate': '00',
'current_Status': 'Qued(5)',
'contact': '--'
}, {
'id': 'xxx-004',
'dev_name': 'bbbbb',
'department': 'LMN',
'loc': 'loc-004',
'hourly_rate': '00',
'current_Status': 'Vacction',
'contact': '--'
}];
data.forEach(elm => {
const temp = [elm.id, elm.dev_name, elm.department, elm.loc, elm.hourly_rate, elm.current_Status, elm.contact];
rows.push(temp);
console.log('Rows', rows); // showing all data
});
downloadPDF.autoTable({
head: header,
body: rows,
});
downloadPDF.save('demo.pdf');
}