如何使用模板数据生成二维码？答案

【问题标题】：How to generate a QR code with templated data?如何使用模板数据生成二维码？
【发布时间】：2018-10-16 04:42:53
【问题描述】：

我目前正在使用 Express、Mustache 和 QRCode.js。

目前，在从数据库中编辑产品时，会使用小胡子模板并将 /id 添加到 URL 的末尾以指定要编辑的产品 ID。在这个编辑页面的底部，我能够使用链接到当前页面的 QRCode.js 创建一个二维码。它将被下载并打印到贴纸上，该贴纸将放在架子上。这样，用户就可以用手机扫描二维码，从产品库存中扣除。

但是，我真的想在该可下载二维码的右侧添加 {{product.productId}}、{{product.Manufacturer}} 和 {{product.product.Sku}}。这样，它们可以轻松下载并直接发送到打印机，而不必将它们放入编辑程序中手动添加信息。这是我的第一个后端产品。有人能给我一个如何完成它的路线图吗？

这是我的代码：

<pre>

    <div class="generate">

    <div class="generate_qrcode" id="output"></div>
     </div>
     <div class="qrcode__span">Right click to download as a .png</div>

     <!-- <img class="QRCode" 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>

    <!-- HTML/Product Edit Field (on same page as above code) -->


    <body class="product_edit">
            <h2 class="ep__h2">Edit Product</h2>
            <div class="ep">
            <form class="ep__form" 
    action="/product_edit/{{product.productId}}" method="POST" 
    autocomplete="off">
                <label for="productname" class="ep__label">Product Name: 
    </label>
                <input type="text" name="product_name" class="ep__input" 
    placeholder="Product Name" value="{{product.productName}}">
                <label for="manufacturer" class="ep__label">Manufacturer: 
    </label>
                <input type="text" name="product_manufacturer" 
    class="ep__input" placeholder="Manufacturer" value=" . 
    {{product.productManufacturer}}">
                <label for="product_size" class="ep__label">Size:</label>
                <input type="text" name="product_size" class="ep__input" 
    placeholder="Size" value="{{product.productSize}}">
                <label for="product_qty" class="ep__label">Quantity: 
    </label>
                <button type="button" class="ep__qtyminus" value="-" 
    name="product_qty" field="product_qty">-</button>
                <input type="number" name="product_qty" 
    class="ep__qtynumber" value="{{product.productQty}}">
                <button type="button" class="ep__qtyplus" value="+" 
    name="product_qty" field="product_qty">+</button>
                <label for="product_sku" class="ep__label--half">SKU: 
    </label>
                <label for="product_minimum" class="ep__label-- 
    half">Minimum:</label>
                <input type="text" name="product_sku" class="ep__input-- 
    half" placeholder="SKU" value="{{product.productSku}}">
                <input type="number" name="product_minimum" 
    class="ep__input--half" placeholder="Minimum" value="
    {{product.productMinimum}}">
                <label for="product_color" class="ep__label--half">Color: 
   </label>
                <label for="product_number" class="ep__label--half">Number: 
   </label>
                <input type="text" name="product_color" class="ep__input-- 
    half" placeholder="Color" value="{{product.productColor}}">
                <input type="number" name="product_number" 
    class="ep__input--half" placeholder="Minimum" value=" . 
    {{product.productNumber}}">
                <button class="ep__save" type="submit">Save</button>
            </form>
            </div>

</pre>

【问题讨论】：

上面的代码是要添加一个新项目吗？如果是这样，您可能希望保存该项目，然后将浏览器重定向到一个页面，他们可以在其中选择添加另一个项目、查看所有以前添加的项目，或转到该项目的打印页面。如果他们去打印路由，那么服务器应该生成可打印的 html 并将其发送到浏览器。它应该发生在一个单独的页面上。
以上代码是可以编辑单个产品属性的页面。在该页面上，在页面底部生成一个二维码，链接到当前页面（window.location.href）。我有点明白你在说什么，但我想避免将二维码保存在数据库中。如果您能给我一些提示，告诉我如何使该 QR 码在此页面上不可见并创建一个按钮以在单独的窗口中打开该 QR 码，我相信我可以弄清楚如何使用 pdf.js创造我正在寻找的东西。我在我的头上:(
我有这个：monosnap.com/file/fPL0gxcec8Sx3FkhpOJW23h5S3QHU8 我基本上是在找这个：monosnap.com/file/nUMgCHgDUeXLGGD139IRX1HNnJOzF5

标签： javascript jquery express qr-code mustache

【解决方案1】：

在此处输入以获得更多空间：

假设您可以访问 Express 服务器，为什么不能创建一个检索所有产品的路由，并为每个唯一产品生成一个包含名称、ID、价格和二维码的小 html？然后 express 可以编译所有的 HTML 并发送到浏览器。

app.get('/products/print_stickers', function(req, res, next){

    // below is psuedo code
    var products_array = database.getAllProductInfo(); 

    res.render('print_page', { 
        products: products_array // pass data to mustahce template
    });
})

然后在您的 print_page mustache 文件中，您只需遍历我们从服务器获得的信息。如果它包含所有产品的数据，那么我们可以在一个页面上为每个产品创建 html 贴纸！

var sticker_html = `
    <ul>
        {{#.}}
            <li>
                <div class="left_side">
                    ${new QRCode("output", {
                        text: 'http://mywebsite/product/id/{{product_id}}', // using {{ mustache }} to insert product id
                        width: 256,
                        height: 256,
                        colorDark : "#04243c",
                        colorLight : "#FFFFFF",
                        correctLevel : QRCode.CorrectLevel.H
                    })}
                </div>
                <div class="right_side">
                    <p>{{name}}</p>
                    <p>{{date}}</p>  // using {{ mustache }} to insert product information 
                    <p>{{price}}</p>
                </div>
            </li>
        {{/.}}
    </ul>;
`;
Mustache.render(tmp, products_array);

所以此时，您将转到此页面，服务器将获取产品，为每个独特的项目生成 html，将其发送到您的浏览器，您打印它，然后用剪刀剪下它们并发布他们在你需要的地方。如果您只需要打印一个标签，您可以使用带有产品 ID 的可选查询参数，并说if product_id, then only get 1 product from DB, generate sticker html as normal。

【讨论】：