Как создать PDF / PNG из сгенерированного QR-кода со вставленными данными таблицы (Javascript) - PullRequest
Новая
       12

Как создать PDF / PNG из сгенерированного QR-кода со вставленными данными таблицы (Javascript)

0 голосов
/ 10 октября 2018

Я создаю систему управления запасами для компании, в которой я работаю.Я впервые делаю что-то в бэк-энде, я никогда раньше не трогал Javascript.Я использую Javascript, Mustache.js, PostgreSQL и NPM.В настоящее время я использовал qrcode.js для генерации qr-кода, который ссылается на текущий URL, который генерируется из шаблона усов, содержащего одну строку (продукт) для редактирования.

В настоящее время страница выглядит следующим образом (QR-код не отформатирован) 

<code><pre>
    <body class="product_edit">
        <div class="newproductform">
            <h1 class="newproductform__heading">Edit Product</h1>
            <form class="newproductform__form" action="/product_edit/{{product.productId}}" method="POST" autocomplete="off">
                <div class="newproductform_group">
                    <label for="manufacturer">Manufacturer:</label>
                    <input class="newproductform__input" type="text" id="manufacturer" name="product_manufacturer" placeholder="Manufacturer" value={{product.productManufacturer}}>
                </div>
                <div class="newproductform_group">
                    <label for="productname">Product Name:</label>
                    <input class="newproductform__input" type="text" id="productname" name="product_name" placeholder="Product Name" value={{product.productName}}>
                </div>
                <div class="newproductform_group">
                    <label for="sku">SKU:</label>
                    <input class="newproductform__input" type="text" id="sku" name="product_sku" placeholder="SKU" value={{product.productSku}}>
                </div>
                <div class="newproductform_group">
                    <label for="size">Size:</label>
                    <input class="newproductform__input" type="text" id="size" name="product_size" placeholder="Size" value={{product.productSize}}>
                </div>
                <div class="newproductform_group">
                    <label for="color">Color:</label>
                    <input class="newproductform__input" type="text" id="color" name="product_color" placeholder="Product Color" value={{product.productColor}}>
                </div>
                <div class="newproductform_group">
                    <label for="num">Product Number:</label>
                    <input class="newproductform__input" type="number" id="num" name="product_number" placeholder="Product Number" min="1" max="999" value={{product.productNumber}}>
                </div>
                <div class="newproductform_group">
                    <label for="minqty">Minimum Quantity:</label>
                    <input class="newproductform__input" type="number" id="minqty" name="product_minimum" placeholder="Minimum Quantity" min="1" max="999" value={{product.productMinimum}}>
                </div>
                <div class="newproductform_group">
                    <label for="qtyavail">Quantity Available:</label>
                    <input class="newproductform__input" type="number" id="qtyavail" name="product_qty" placeholder="Quantity Available" min="0" max="999" value={{product.productQty}}>
                </div>
                <div class="btn-div">
                    <button class="btn" type="submit">Save</button>
                </div>
            </form>
    </div>


    <div id="output"></div>
    <img src="qrcode-encoding.png" />
        <script>
            let qrcode = new QRCode("output", {
                text: window.location.href,
                width: 256,
                height: 256,
                colorDark : "#04243c",
                colorLight : "#FFFFFF",
                correctLevel : QRCode.CorrectLevel.H
            });
        </script>

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

Вы можете видеть, код qr генерируется как png.

Вопрос в том, как я могу использоватьчто для создания документа в формате PDF шириной примерно 3 дюйма, высотой 2 дюйма, содержит QR-код в левой части экрана с максимальным размером, а затем вставляются {{product.productManufacturer}}, {{product.productName}}, {{product.productSize}}, {{product.productColor}} и {{product.number}} в виде отдельных строк текста в правой части QR-кода в этом PDF-файле?

По существу, для создания QR-кодакод с qrcode.js, который ссылается на текущую страницу (шаблон усов), затем создает файл PDF и вставляет строки текста со связанными усами строками из моей базы данных.(эта страница содержит 1 строку данных из моей таблицы.) Затем я хотел бы превратить ее в кнопку под моей текущей кнопкой сохранения, которая загружает этот файл PDF.

...