Question

我正在做我的第一个后端项目。我正在使用Mustache来生成应用程序上的所有页面（基于Web的产品库存系统，使用QR码编辑产品信息）。

我的编辑产品页面是由Mustache生成的，我已经使用QRCode.js生成了QR码，该QR码链接到当前页面。因此，QR码不会保存在任何地方，而只是在该页面上生成。

我想提取由Mustache生成的当前选定产品信息和该QR代码，并创建一个按钮，将该QR下载到一个小的pdf文件中，该文件包含左侧的QR代码和几行数据元素，例如产品名称，sku和制造商。

此信息可能并不重要，但我想将其格式化为3英寸宽，2英寸高的pdf格式，在左侧包含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>

如何从QRCode.js生成包含QR码的pdf？

0 个答案: