将 res.locals 值传递给客户端 JS 文件

Question

我正在尝试使用节点包 jsbarcode 生成条形码。我需要能够将变量从 res.locals 传递到一个名为 main.js 的文件中，该文件位于我的 public 目录中。这样做的原因是我需要使用通过 res.locals

传递到模板的数据在页面加载时生成条形码

html:

<img id="barcode"/>

main.js:

JsBarcode("#barcode", amodel + "-" + aNum, {
  format: "CODE128C",
  ean128: true
});

我不确定 amodel + "-" + aNum 是否是正确的格式，但本质上我需要能够传入一个字符串，然后是一个 -，然后是一个数字，然后才能生成条形码。我也希望能够更改条形码的格式，但这不是优先事项。

TLDR:

如何将可变数据传递到客户端 js 文件？

Answer 1

您没有将变量传递到 js 文件中。但是，在您的模板中，您可以将结果分配给 window。例如使用 ejs 模板：

<script>
  window.jbarData = '<%-jbarData%>'
</script>

然后在您的 main.js 中您可以引用 window.jbarData 并根据需要使用它。您需要更新它以使用您正在使用的任何模板语言。

Answer 2

我已经使用变通方法解决了这个问题。我相信还有更多 "proper" 的方法可以做到这一点。这是 html:

<style>
  .hidden {display: none;}

<div id="test123" class="hidden">{{test}}</div>
   <div id="codeType" class="hidden">{{codeType}}</div>
   <img id="barcode"/>

然后在同一页面的script标签中的JS：

<script>
  var test = document.getElementById("test123").innerHTML;
  var codeType = document.getElementById("codeType").innerHTML;
  $('#barcode').JsBarcode('14374', {format: 'UPC'},{ width: 2, height: 90 });
</script>

这几乎等同于我将 res.locals 传递到隐藏的 div，然后使用 .innerhtml 将值提取到我的变量中。这有效，我可以加载它 10/10 次没有错误。如果有人想知道，我正在使用 JSBarCode。

将 res.locals 值传递给客户端 JS 文件

Pass res.locals value to client side JS file

javascript

barcode

node.js