CODEWITHSUNDEEP
javascriptjquerypdfmake
Volen
Volen

Reputation: 25

Generate row dynamically using javascript for pdfmake

I will do my best to explain what I want to achieve. So I have inside an array a few strings. They are stored dynamically depending of how much options the client has chosen.

optionschecked = [];
  $(".optionschosen").each(function() {
        optionschecked.push($.trim($(this).text()));
    });
});

My goal is that when client press on "Generate my pdf" it creates columns using pdfmake I tried the solutions I found online but they do not seem to work. My variable is declared globaly so it seems weird.

Result I wish to get

I just have no idea how to generate each column using the strings in my array with a loop.

Solutions I found (but that I can't get to work):

pdfMake generate rows dynamically https://github.com/bpampuch/pdfmake/issues/24

Upvotes: 0

Views: 1836

Answers (2)

Volen
Volen

Reputation: 25

Found the answer myself:

optionschosen = [{nom:'test', prix: 100},{nom: 'test', prix: 100}, {nom:'test', prix: 100}];

function buildTableBody(data, columns) {
    var body = [];

    body.push(columns);

    data.forEach(function(row) {
        var dataRow = [];

        columns.forEach(function(column) {
            dataRow.push(row[column].toString());
        })

        body.push(dataRow);
    });

    return body;
}

function table(data, columns) {
    return {
        table: {
            widths:['80%', '20%'],
            body: buildTableBody(data, columns)
        }
    };
}

var dd = {
    content: [
        table(optionschosen, ['nom', 'prix'])
    ]
}

Upvotes: 2

Krokodil
Krokodil

Reputation: 1480

Here is a simple form which allows clients to create tables. Please note that when you click the buttons, you get no response, and the fields do not empty, but they DO work. Please also note that this is very basic and you would want to style it better, and perhaps expand on it, for example by replacing the form with a css grid that is contenteditable. However, this snippet does get the main concept across, or so I hope:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.js" integrity="sha512-TtLC7VxmsBn2S6vL3Ib403LU+Gf8cH4wf7UdOxRBRKVrtLXPjA5Tv4/hY7BwIeGAJ/YKNjRtjG4nTzYD/snZOQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js" integrity="sha512-vv3EN6dNaQeEWDcxrKPFYSFba/kgm//IUnvLPMPadaUf5+ylZyx4cKxuc4HdBf0PPAlM7560DV63ZcolRJFPqA==" crossorigin="anonymous"></script>
    <title>pdf</title>
</head>
<body>
    

<form id="form">
    <textarea placeholder="Text" cols="50" rows="10" id="content"></textarea> <br>
    <input type="number" name="font_size" placeholder="font size" id="font_size"> <br>
    <input type="checkbox" name="center" id="center"> <label for="center">Center align?</label> <br>
    <input type="checkbox" name="center" id="bold"> <label for="bold">Bold?</label> <br>
    <button id="create-cell">Create cell</button>

    <hr>
    <button id="next-column">Create cell in 2nd column</button> 

    <br><hr><br>

    <button id="export">Export</button>

</form>



<script type="text/javascript">

const form = document.getElementById("form");
const content = document.getElementById("content");
const font_size = document.getElementById("font_size");
const center = document.getElementById("center");
const bold = document.getElementById("bold");
const Export = document.getElementById("export");

const create_cell = document.getElementById("create-cell");
const next_column = document.getElementById("next-column");


const table = []; //this is body

let i = 0;
let widths = ["100%"];

form.addEventListener("submit", function() {
    window.event.preventDefault();
});



create_cell.addEventListener("click", function() {
    var obk = {
        text: content.value,
        font_size: font_size.value || 15,
        bold: Boolean(bold.checked),
        alignment: center.checked ? "center" : "left"
    }

    table.push([obk]);

    console.log(table);
});




next_column.addEventListener("click", function() {
    var row = table[i];

    var obk = {
        text: content.value,
        font_size: font_size.value || 15,
        bold: Boolean(bold.checked),
        alignment: center.checked ? "center" : "left"
    }
    table[i].push(obk);

    widths = ["49%", "49%"];

    i++;
});



Export.addEventListener("click", function() {
    var dd = {
        content: [
            {
                table: {
                    widths: widths,
                    heights: [30],
                    body: table
                }
            }
        ]
    }

    pdfMake.createPdf(dd).open();

});
















</script>


</body>
</html>

Upvotes: 0

Related Questions