fastadmin 实现标签打印

项目场景如图,需要打印一批条形码或者二维码,除了市面上成熟的标签机之外,今天挑战一下使用普通的打印机+不干胶贴纸,实现低成本的标签打印;

项目框架基于 fastadmin:

1、项目对应的js添加打印按钮的事件监听

javascript 复制代码
            $('.btn-print').click(function () {
                var ids = Table.api.selectedids(table);//获取选中列的id
                Fast.api.open("code/print?id="+ids, __('打印标签'), {
                    area: ['100%', '90%']
                });
            })

2、打印标签模板的html页面:使用了 grid 布局

html 复制代码
<style>
    
.container {
    display: grid;
    grid-template-columns: repeat(6, 125px);
    /*grid-template-rows: repeat(7, 76px);*/
    /* width: 800px; */
    align-content: space-between;
    align-items: center;
    justify-items: stretch;
    grid-gap: 2px 2px;
}

.item{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid;
    width: 100%;
    height: 76px;
    padding: 5%;
}

</style>
<div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
        <button type="reset" class="btn btn-primary btn-embossed btn-close"
                onclick="Layer.closeAll()">{:__('Close')}</button>
        <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="doPrint()">打印</button>
    </div>
</div>
<div id="app">
    <div class="container">
        {volist name="lists" id="vo"}
        <div class="item">
            <div style="width:85%;">
                <img style="width:100%;" src="{$vo.barcode}" alt="" />
            </div>
            <div style="font-size:x-small;">
                {$vo.code}
            </div>
        </div>
        {/volist}
    </div>
 
</div>
<style></style>
<script>
    function doPrint() {
        window.print()
    }
</script>

模板标签页效果如下:

3、后端controller写一个 print 方法

javascript 复制代码
    public function print(){
        $ids = $this->request->get('id');
        $ids = explode(',',$ids);
        $lists = $this->model
            ->where('id','in',$ids)
            ->select();
        // dump($lists[0]->toArray());
        $this->assign('lists',$lists);
        return $this->fetch();
    }

4、后端 model,因为条形码是依赖插件生成,所以这里追加barcode属性

php 复制代码
    // 追加属性
    protected $append = [
        'barcode'
    ];
    
    public function getBarcodeAttr($value, $data)
    {
        $code = $data['code'];
        return "https://3f.gde.cc/barcode/build?text={$code}&type=C128&foreground=%23000000&width=1&height=40";
    }

5、最后依赖浏览器的打印功能实现打印

实际上还需要通过调整边距、缩放等实现最佳的打印效果。

相关推荐
作曲家种太阳2 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬8 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术16 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话32 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys34 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话36 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村42 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬1 小时前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序