Add a HTML to your Wix site and pass your data from the page to the HTML component using: $w('#html1').postMessage(YourData);
YourData can be a single value or even an array of data. In this example, we are going to use an array of data.
In your HTML component, paste the following code: <html>
<body>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">
<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<!-- Include html2canvas library -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" defer></script>
<!-- Include pdfmake library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js" defer></script>
</head>
<body>
<script type="text/javascript">
let subheaderText;
window.onmessage = (event) => {
if (event.data) {
const dataArray = event.data;
// Check if the received data is an array
dataArray.forEach((obj, index) => {
// Iterate through the array and access each object
console.log(`Object ${index + 1}:`);
// Access properties of the object
console.log(`Property 1: ${obj.YourProperty}`);
console.log(`Property 2: ${obj.YourProperty}`);
console.log(`Property 2: ${obj.YourProperty}`);
// Add more properties as needed
subheaderText = obj.YourProperty;
});
const tableData = dataArray.map(obj => {
return [obj.title, `$${obj.amount.toFixed(2)}`];
});
const docDefinition = {
content: [
{ text: 'YourHeader', style: 'header' },
{ text: 'YourSubHeader', style: 'subheader' },
{ text: "YourSubHeader: "+ subheaderText, style: 'subheader' },
{
style: 'tableExample',
table: {
headerRows: 1,
widths: ['*', 'auto'],
body: [['YourAttributeName', 'YourAttributeName'], ...tableData],
},
},
],
styles: {
header: { fontSize: 24, bold: true, margin: [0, 0, 0, 10] },
subheader: { fontSize: 18, bold: true, margin: [0, 10, 0, 5] },
tableExample: { margin: [0, 5, 0, 15] },
},
};
pdfMake.createPdf(docDefinition).download('YourFileName.pdf');
}
};
</script>
</body>
</html>
In this HTML code, all you have to do is replace YourProperty with the value of the array that you want to access, replace YourHeader and YourSubHeader with your text, and name your table headers with YourAttributeName.
Change YourFileName with a name of your choice.