Как создать PDF-файл, содержащий QR-код из QRCode.js? - PullRequest
Новая
       16

Как создать PDF-файл, содержащий QR-код из QRCode.js?

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

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

Моя страница редактирования продукта сгенерирована Mustache, и я использовал QRCode.jsсоздать QR-код, который ссылается на текущую страницу.Поэтому QR-код нигде не сохраняется, он просто создается на этой странице.

Я хочу получить информацию о текущем выбранном продукте, сгенерированную Mustache и этим QR-кодом, и создать кнопку, которая загружает этот QR-код нав небольшой PDF-файл, который содержит QR-код с левой стороны и пару элементов данных строки, таких как название продукта, артикул и производитель.

Эта информация может быть не важной, но я бы хотелкак отформатировать его в PDF, который имеет ширину 3 дюйма, высоту 2 дюйма, содержит QR-код с левой стороны (максимальный размер), а затем вводит эти 3 бита информации в виде текста с правой стороны.Он предназначен для создания стикеров, которые идут на полке продукта.

Я видел такие вещи, как html2canvas и jspdf, но во всех найденных мной ссылках они связывают сохраненный файл, а не шаблоны из Mustache и QRCode..js.

Вот мой код: 

<pre>
<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>
                    <div class="btn-div">
                        <!--If it's not possible, or I'm unable to grasp how to make the pdf, it'd be nice to make it to where the QR code isn't shown on the page
                        and for it to be downloaded, only by clicking this button. However, I couldn't get that to work either.-->
                        <button class="btn"><a href="#output" download>Download QR Code</a></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>
...