python+vue生成条形码码并展示

需求

最近想做一个小工具,大概要实现这样的效果:后端生成条形码后,不保存到服务器,直接返回给前端展示。

大概思路是,通过 python-barcode库 生成条码的字节流,生成字节流后直接编码成base64格式返回给前端,前端通过img标签展示base64格式的图片。

代码示例

后端代码

以flask为例,其他web框架实现的方法类似。

这里使用Code128格式的条码,可以去python-barcode官网看看,该工具还支持生成其他格式的条码。

复制代码
@app.route('/barcode', methods=['POST'])
def bar_code():
    param_code = request.get_json()['barCode']

    buffer = BytesIO()
    Code128(param_code, writer=SVGWriter()).write(buffer)
    res = base64.b64encode(buffer.getvalue()).decode('utf-8')
    return {
        "code": 200,
        "message": "success",
        "data": res
    }

前端代码

以vue为例

复制代码
<template>
    <img :src="imgUrl" />
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'
const axios = inject("$axios")

const imgUrl = ref(null)

const load_barcode = async () => {

    // 请求后台
    const param = {
        "barCode": "100000902922"
    }
    let res = await axios.post("http://127.0.0.1:5000/barcode", param);
    // 获取base64格式的图片
    const b4 = res.data.data
    // 绑定到img的src
    imgUrl.value = "data:image/svg+xml;base64," + b4
}

onMounted(() => {
    load_barcode()
})

</script>

最后的效果

如有问题,欢迎指正。

相关推荐
Sheldon一蓑烟雨任平生2 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
paopaokaka_luck3 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
做运维的阿瑞4 小时前
用 Python 构建稳健的数据分析流水线
开发语言·python·数据分析
左师佑图4 小时前
综合案例:Python 数据处理——从Excel文件到数据分析
开发语言·python·数据分析·excel·pandas
Sheldon一蓑烟雨任平生4 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
l1t5 小时前
利用DeepSeek修改数据结构提升求解集合程序效率
数据结构·python·deepseek
jiushun_suanli5 小时前
PyTorch CV模型实战全流程(一)
人工智能·pytorch·python
2301_764441335 小时前
基于python构建的低温胁迫实验
开发语言·python
天才测试猿6 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
云烟成雨TD6 小时前
NumPy 2.x 完全指南【四十二】线性代数之向量运算
python·机器学习·numpy