Hmm thanx @AnsonHwang
I have another query. Can u please ans to it ?
I am use jsPDF and jsPDF-autotable libraries in retool How can I use them ?
It is not allowing me to import them where I am using these.
also If I import them in libraries, then they are not accessible
You should try custom component.
It does not work, any working example ?
Did u ever try your own ?
Hello, I write a demo for you, just paste it to iframe.
Don't forget allow download
But it seem it can't support doc.output in custom component, so I commented out this code in the code.
Here is code
<html>
<head>
<script crossorigin src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script crossorigin src="https://unpkg.com/jspdf-autotable@3.6.0/dist/jspdf.plugin.autotable.js"></script>
</head>
<body>
<table class="table pure-table" id="basic-table" style="display: block;">
<thead>
<tr>
<th>ID</th>
<th colspan="2">Name</th>
<th>Email</th>
<th>Country</th>
<th>IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0@furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr style="background: rgb(155, 89, 182); color: white;">
<td>2</td>
<td>Janice</td>
<td>Henry</td>
<td>jhenry1@theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td>3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2@constantcontact.com</td>
<td>Mexico</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td>4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3@psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td>5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4@go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td>6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5@com.com</td>
<td>Canada</td>
<td>18.186.38.37<br>18.123.22.82</td>
</tr>
</tbody>
</table>
<embed id="output" type="application/pdf" style="width:500px;height:800px;"/>
<script>
const doc = new window.jspdf.jsPDF();
// From HTML
doc.autoTable({ html: '.table' })
// From Javascript
var finalY = doc.lastAutoTable.finalY || 10
doc.text('From javascript arrays', 14, finalY + 15)
doc.autoTable({
startY: finalY + 20,
head: [['ID', 'Name', 'Email', 'Country', 'IP-address']],
body: [
['1', 'Donna', 'dmoore0@furl.net', 'China', '211.56.242.221'],
['2', 'Janice', 'jhenry1@theatlantic.com', 'Ukraine', '38.36.7.199'],
[
'3',
'Ruth',
'rwells2@constantcontact.com',
'Trinidad and Tobago',
'19.162.133.184',
],
['4', 'Jason', 'jray3@psu.edu', 'Brazil', '10.68.11.42'],
['5', 'Jane', 'jstephens4@go.com', 'United States', '47.32.129.71'],
['6', 'Adam', 'anichols5@com.com', 'Canada', '18.186.38.37'],
],
})
finalY = doc.lastAutoTable.finalY
doc.text('From HTML with CSS', 14, finalY + 15)
doc.autoTable({
startY: finalY + 20,
html: '.table',
useCss: true,
})
// document.getElementById("output").src = doc.output('datauri');
doc.save("ss.pdf");
</script>
</body>
</html>
