fastadmin 实现标签打印

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

项目框架基于 fastadmin：

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

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

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

<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 方法

    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属性

    // 追加属性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、最后依赖浏览器的打印功能实现打印

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