admin管理员组文章数量:1024603
I created an array with values from a dynamic table using Array.prototype.push().
Then convert it to pdf like this
doc.autoTable(vHeader, vData, opt);
doc.save('myTable');
Wherein,
vHeader = header array
vData = data inside the body cells
opt = styling
My output is this PDF output:
As you can see in the image, for example, "260.00 /roll", I want to make "260.00" in bold text while leaving " /roll" in regular. Can you help me with this? Thank you so much.
I created an array with values from a dynamic table using Array.prototype.push().
Then convert it to pdf like this
doc.autoTable(vHeader, vData, opt);
doc.save('myTable');
Wherein,
vHeader = header array
vData = data inside the body cells
opt = styling
My output is this PDF output:
As you can see in the image, for example, "260.00 /roll", I want to make "260.00" in bold text while leaving " /roll" in regular. Can you help me with this? Thank you so much.
Share Improve this question edited Aug 13, 2019 at 0:24 Pallamolla Sai 2,5031 gold badge15 silver badges14 bronze badges asked Aug 9, 2019 at 9:50 lnylny 411 silver badge4 bronze badges 13- Hello thank you for saying. I've already updated it. I hope its fine now. – lny Commented Aug 9, 2019 at 10:22
- could you please tell did my answer help? – Pallamolla Sai Commented Aug 13, 2019 at 3:38
- I have pasted code here please go through this link. codepen.io/pallamollasai/project/editor/AVPpOK pdf will be downloaded & check it once. – Pallamolla Sai Commented Aug 13, 2019 at 8:55
- Hello. I did copied the whole code you've sent together with the plug in yet the error still occured. – lny Commented Aug 13, 2019 at 10:19
- have you gone through above codepen link . DId you get downloaded pdf? – Pallamolla Sai Commented Aug 13, 2019 at 11:00
1 Answer
Reset to default 3After working whole day following code worked to mix both bold & normal text inside a cell.
To download autotable.js source code go to through this link.(copy the whole code inside file called autoTableJSpdf.js)
To download html2canvas(1.0.0-alpha.11) source code go through this link and download "html2canvas.js" file and paste it inside your folder & include it in script. (No need to change this file.)
html2canvas 1.0.0 alpha.11
download autotablejs 3.2.2
I am taking my own data for reference.
** whole html & javscript code **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="html2canvas.js"></script> // download source code & paste inside file called "html2canvas.js"
<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="autoTableJSpdf.js"></script>
</head>
<body>
<!-- this html is not necessary -->
<h1>Hello world</h1>
<div id='doc'>
<p>Hello world</p>
<div class="first-page">
<h1>bond</h1>
<img src="1.png"/>
</div>
<div class="second-page">
<img src="2.png"/>
</div>
</div>
<button onclick="saveDoc()">click</button>
<script type="text/javascript">
var doc = new jsPDF();
// You can use html:
// doc.autoTable({html: '#my-table'});
// Or JavaScript:
var header = ["qty","particular","luzon","trading","arrow"];
//var data = [];
//var i=0;
doc.autoTable({
willDrawCell: (data) => {
if(data.section==='body') {
if(data.row.index===0 && data.column.index ===2) {
var endIndex = data.cell.raw.indexOf('/');
var boldText = data.cell.raw.substring(0,endIndex);
var normalText = data.cell.raw.substring(endIndex);
console.log("boldText is "+boldText+" normalText is "+normalText);
// data.cell.raw = '<b>'+boldText+'</b>'+normalText;
data.cell.text = '<b>'+boldText+'</b>'+normalText;
console.log("after data cell iss ");
console.log(data.cell.raw);
console.log('<b>'+boldText+'</b>'+normalText);
}
}
},
// columnStyles: {0: {halign: 'center', fillColor: [0, 255, 0]}},
head: [header],
body: [
['5 tube','electrical','260.00 /roll','290.00 ,Armark1','230.00,crorocdile'],
['6 tube','electrical1','261.00 /roll','291.00 ,Armark11','231.00,crorocdile']
]
});
console.log("i is "+i);
doc.save('table.pdf');
</script>
</body>
</html>
After writing above code you need to make change inside (autoTableJSpdf.js which you downloaded ) jsPDF.API.autoTableText method like below. just add like below.
// dont change any code
// method name jsPDF.API.autoTableText
if (typeof x !== 'number' || typeof y !== 'number') { // this will already there
console.error('The x and y parameters are required. Missing for text: ', text);
}
// new code to add
if (/<[a-z][\s\S]*>/i.test(text)) { // you need to add this whole if code
// text = text.join(' ');
const div = document.createElement('div');
div.innerHTML = text;
text = div.innerHTML;
this.fromHTML('<div style=" font-size: 15px; ">' + text + '</div>', x, y, { // y coord
'width': 120
});
return this;
}
// remaining code
Following links might help.
how to mix both bold & normal html github
I created an array with values from a dynamic table using Array.prototype.push().
Then convert it to pdf like this
doc.autoTable(vHeader, vData, opt);
doc.save('myTable');
Wherein,
vHeader = header array
vData = data inside the body cells
opt = styling
My output is this PDF output:
As you can see in the image, for example, "260.00 /roll", I want to make "260.00" in bold text while leaving " /roll" in regular. Can you help me with this? Thank you so much.
I created an array with values from a dynamic table using Array.prototype.push().
Then convert it to pdf like this
doc.autoTable(vHeader, vData, opt);
doc.save('myTable');
Wherein,
vHeader = header array
vData = data inside the body cells
opt = styling
My output is this PDF output:
As you can see in the image, for example, "260.00 /roll", I want to make "260.00" in bold text while leaving " /roll" in regular. Can you help me with this? Thank you so much.
Share Improve this question edited Aug 13, 2019 at 0:24 Pallamolla Sai 2,5031 gold badge15 silver badges14 bronze badges asked Aug 9, 2019 at 9:50 lnylny 411 silver badge4 bronze badges 13- Hello thank you for saying. I've already updated it. I hope its fine now. – lny Commented Aug 9, 2019 at 10:22
- could you please tell did my answer help? – Pallamolla Sai Commented Aug 13, 2019 at 3:38
- I have pasted code here please go through this link. codepen.io/pallamollasai/project/editor/AVPpOK pdf will be downloaded & check it once. – Pallamolla Sai Commented Aug 13, 2019 at 8:55
- Hello. I did copied the whole code you've sent together with the plug in yet the error still occured. – lny Commented Aug 13, 2019 at 10:19
- have you gone through above codepen link . DId you get downloaded pdf? – Pallamolla Sai Commented Aug 13, 2019 at 11:00
1 Answer
Reset to default 3After working whole day following code worked to mix both bold & normal text inside a cell.
To download autotable.js source code go to through this link.(copy the whole code inside file called autoTableJSpdf.js)
To download html2canvas(1.0.0-alpha.11) source code go through this link and download "html2canvas.js" file and paste it inside your folder & include it in script. (No need to change this file.)
html2canvas 1.0.0 alpha.11
download autotablejs 3.2.2
I am taking my own data for reference.
** whole html & javscript code **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="html2canvas.js"></script> // download source code & paste inside file called "html2canvas.js"
<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="autoTableJSpdf.js"></script>
</head>
<body>
<!-- this html is not necessary -->
<h1>Hello world</h1>
<div id='doc'>
<p>Hello world</p>
<div class="first-page">
<h1>bond</h1>
<img src="1.png"/>
</div>
<div class="second-page">
<img src="2.png"/>
</div>
</div>
<button onclick="saveDoc()">click</button>
<script type="text/javascript">
var doc = new jsPDF();
// You can use html:
// doc.autoTable({html: '#my-table'});
// Or JavaScript:
var header = ["qty","particular","luzon","trading","arrow"];
//var data = [];
//var i=0;
doc.autoTable({
willDrawCell: (data) => {
if(data.section==='body') {
if(data.row.index===0 && data.column.index ===2) {
var endIndex = data.cell.raw.indexOf('/');
var boldText = data.cell.raw.substring(0,endIndex);
var normalText = data.cell.raw.substring(endIndex);
console.log("boldText is "+boldText+" normalText is "+normalText);
// data.cell.raw = '<b>'+boldText+'</b>'+normalText;
data.cell.text = '<b>'+boldText+'</b>'+normalText;
console.log("after data cell iss ");
console.log(data.cell.raw);
console.log('<b>'+boldText+'</b>'+normalText);
}
}
},
// columnStyles: {0: {halign: 'center', fillColor: [0, 255, 0]}},
head: [header],
body: [
['5 tube','electrical','260.00 /roll','290.00 ,Armark1','230.00,crorocdile'],
['6 tube','electrical1','261.00 /roll','291.00 ,Armark11','231.00,crorocdile']
]
});
console.log("i is "+i);
doc.save('table.pdf');
</script>
</body>
</html>
After writing above code you need to make change inside (autoTableJSpdf.js which you downloaded ) jsPDF.API.autoTableText method like below. just add like below.
// dont change any code
// method name jsPDF.API.autoTableText
if (typeof x !== 'number' || typeof y !== 'number') { // this will already there
console.error('The x and y parameters are required. Missing for text: ', text);
}
// new code to add
if (/<[a-z][\s\S]*>/i.test(text)) { // you need to add this whole if code
// text = text.join(' ');
const div = document.createElement('div');
div.innerHTML = text;
text = div.innerHTML;
this.fromHTML('<div style=" font-size: 15px; ">' + text + '</div>', x, y, { // y coord
'width': 120
});
return this;
}
// remaining code
Following links might help.
how to mix both bold & normal html github
本文标签：
版权声明：本文标题：javascript - Bold and Normal textstyle inside a cell in JsPdf autotable (how to use bold and normal text using jsautotable jspdf 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745608877a2158885.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论