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>

最后的效果

如有问题,欢迎指正。

相关推荐
IT学长编程10 分钟前
计算机毕业设计 基于k-means的校园美食推荐系统 Python 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试】
大数据·python·毕业设计·kmeans·课程设计·毕业论文·美食推荐系统
如竟没有火炬38 分钟前
LRU缓存——双向链表+哈希表
数据结构·python·算法·leetcode·链表·缓存
咖啡续命又一天1 小时前
python 自动化采集 ChromeDriver 安装
开发语言·python·自动化
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
Komorebi_99992 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
松果集2 小时前
【1】数据类型2
python
且慢.5892 小时前
命令行的学习使用技巧
python
Hilaku2 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
海琴烟Sunshine2 小时前
leetcode 66.加一 python
python·算法·leetcode
罗橙7号3 小时前
【pyTorch】关于PyTorch的高级索引机制理解
人工智能·pytorch·python