Vue里用jsbarcode生成条形码不显示怎么办？

FSD-文明提问于 2026-03-20 21:20:19 阅读 10

组件

我在Vue组件里引入了jsbarcode，但页面上始终不显示条形码，控制台也没报错，是不是哪里配置错了？

我试过在mounted里调用JsBarcode，也给svg加了id，但就是空白。代码大概是这样：

<template>
  <div>
    <svg id="barcode"></svg>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
export default {
  mounted() {
    JsBarcode("#barcode", "1234567890")
  }
}
</script>

特殊组件

我来解答赞 2 收藏

反馈

1 条解答

Mc.嘉蕊 Lv1

遇到这种问题，通常是元素渲染顺序或者选择器的问题。你在 mounted 阶段调用 JsBarcode 是正确的，但是确保 DOM 已经完全加载并且你的 SVG 元素已经存在。

检查一下你的代码，确认 SVG 元素确实存在，并且 JsBarcode 库正确引入。你可以在控制台打印一下 document.getElementById('barcode') 看看是否能获取到元素。

另外，JsBarcode 的 API 调用看起来没问题，但是有时候可能需要指定一些选项来确保条形码正确渲染。你可以尝试这样：

import JsBarcode from 'jsbarcode'



export default {

  mounted() {

    this.$nextTick(() => {

      JsBarcode(document.getElementById('barcode'), "1234567890", {

        format: "CODE128",

        width: 2,

        height: 100,

        displayValue: true

      })

    })

  }

}

这里用到了 this.$nextTick，确保 DOM 更新后执行 JsBarcode。同时设置了几个常见的选项参数，帮助条形码正确显示。如果问题依然存在，可以检查浏览器控制台是否有警告信息，有时候会有隐藏的问题提示。

2026-03-20 21:22