Генерировать строку динамически, используя javascript для pdfmake

Я сделаю все возможное, чтобы объяснить, чего я хочу достичь. Итак, у меня внутри массива несколько строк. Они сохраняются динамически в зависимости от того, сколько опций выбрал клиент.

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

Моя цель состоит в том, что когда клиент нажимает «Создать мой pdf», он создает столбцы с помощью pdfmake. Я попробовал решения, которые нашел в Интернете, но они, похоже, не работают. Моя переменная объявлена ​​глобальной, поэтому это кажется странным.

Результат, который я хочу получить

Я просто понятия не имею, как сгенерировать каждый столбец, используя строки в моем массиве с циклом.

Решения, которые я нашел (но не могу приступить к работе):

pdfMake динамически генерировать строки https://github.com/bpampuch/pdfmake/issues/24


javascript jquery pdfmake
person Volen    schedule 20.11.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Сам нашел ответ:

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'])
    ]
}
person Volen    schedule 21.11.2020

arrow_upward
0
arrow_downward

Вот простая форма, которая позволяет клиентам создавать таблицы. Обратите внимание, что когда вы нажимаете кнопки, вы не получаете ответа, и поля не пустые, но они ДЕЙСТВИТЕЛЬНО работают. Также обратите внимание, что это очень просто, и вы хотели бы улучшить его стиль и, возможно, расширить его, например, заменив форму сеткой css contenteditable. Тем не менее, этот фрагмент действительно передает основную концепцию, или я на это надеюсь:

<!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>
person AlphaHowl    schedule 20.11.2020
comment
Здравствуйте, спасибо за попытку помочь, но вы не ответили на мой вопрос... Я спросил, как вставить одну строку для каждого элемента в массиве, состоящем из нескольких строк. [вариант 1, вариант 2, вариант 3]. - person Volen; 21.11.2020