web-print-for-chrome

web-print-for-chrome是一个基于vue2与element-ui的可复用组件，旨在简化chrome网页端的标签打印功能。通过渲染页面再转换为图片进行网页的打印，内置静默打印与多条码打印。

注意点

❗️需要引入element-ui组件，且需要在mian.js中注册使用：

// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

❗️首次配置好打印机以及打印机模板后，后续打印默认选择首次的配置，需要在非静默打印模式下配置；

功能特性

• 功能1：可以调整纸张大小，针对不同的标签纸进行打印；
• 功能2：可以实时渲染条码与二维码；
• 功能3：可以将渲染的模板进行保存和导入（json格式，可以单独复制粘贴或使用文件）；
• 功能4：多条码打印仅需传入json即可，所有参数均可根据模板自行组装；
• 功能5：静默打印需要浏览器单独配置（注意空格）：

 --kiosk-printing

页面展示

• 总体页面：
• 纸张设置：
• 文本编辑：
• 条码编辑：
• 二维码编辑：
• 保存模板：
• 导入模板：

参数与方法

• 模板：temps: []

// main.js
import {WebPrint} from "web-print-for-chrome/src";

Vue.component("WebPrint", WebPrint);

// 引用页面
<web-print ref="webPrint" :temps="[]" />

• 批量打印：printPageMulti()，需要先传入temps参数

doMultiPrint() {
  this.$refs.webPrint.printPageMulti();
}