Question

我正在为我工作的公司创建一个库存管理系统。这是我第一次在后端执行任何操作，我以前从未接触过Javascript。我正在使用Javascript，Mustache.js，PostgreSQL和NPM。当前，我已经使用qrcode.js生成了一个qr代码，该代码链接到当前的网址，该网址是从胡子模板生成的，其中包含要编辑的一行（产品）。

当前，页面看起来像这样（QR码未格式化）

<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>
</pre>

我不希望有人能完全完成我的任务，尽管会感激不尽。如果有人可以将我指向正确的方向，那就太好了。

您会看到，qr代码是作为png生成的。

问题是：如何使用它来创建一个大约3英寸宽，2英寸高的pdf文档，其左侧的QR码接近最大尺寸，然后插入{{product.productManufacturer}}，{{product.productName }}，{{product.productSize}}，{{product.productColor}}和{{product.number}}作为该PDF的QR码右侧的单独文本行？

本质上是使用qrcode.js生成QR码，该QR码链接到当前页面（胡须模板），然后创建pdf并插入带有我数据库中的胡须链接行的文本行。（此页面包含表中的1行数据。）然后，我想将其变成一个按钮，该按钮位于我当前的保存按钮下，该按钮会下载该pdf。

如何使用插入的表格数据从生成的QR代码创建PDF / PNG（JavaScript）

0 个答案: