安装相关依赖

安装Hi Print

npm install vue-plugin-hiprint

JQuery

因为 hi print 使用到了 JQuery 所以需要安装对应依赖

npm i jquery --save-d

引入依赖

在 main.js 中引入 依赖

/*** 打印插件 Hi Print <a href="https://github.com/CcSimple/vue-plugin-hiprint">参考地址</a>*/import { hiPrintPlugin } from 'vue-plugin-hiprint'
hiPrintPlugin.disAutoConnect() // 取消自动连接直接打印客户端
Vue.use(hiPrintPlugin, '$pluginName')
/*** 将Jquery挂载到 Vue实例中*/import jquery from 'jquery'
Vue.prototype.$ = jquery

简单使用

我这边的 demo是 打印条形码，其他的也差不多

<!-- 标签设计页面 -->
<template><div><!-- 三个输入框内容 --><input v-model="sn" size="mini" clearable @keyup.enter.native="confirmPrintPrint" /><input v-model="model" size="mini" clearable @keyup.enter.native="confirmPrintPrint" /><div><!-- 打印设计挂载位置 --><div id="hiprint-printTemplate2" /></div></div>
</template><script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'
export default {
// 组件名称name: 'LabelDesignIndex',// import引入的组件需要注入到对象中才能使用components: {},// 父组件传递值props: {},data() {// 这里存放数据return {sn: '',model: ''}},// 监听属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 生命周期 - 创建完成（可以访问当前this实例）created() {},// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {},beforeCreate() {}, // 生命周期 - 创建之前beforeMount() {}, // 生命周期 - 挂载之前beforeUpdate() {}, // 生命周期 - 更新之前updated() {}, // 生命周期 - 更新之后beforeDestroy() {}, // 生命周期 - 销毁之前destroyed() {}, // 生命周期 - 销毁完成activated() {},// 方法集合methods: {// 使用 hiPrintPlugin 控件打印confirmPrintPrint() {const model = this.modelconst sn= this.sn// 清空原本内容this.$('#hiprint-printTemplate2').empty()// 初始化可拖拽的元素var hiprintTemplate= new this.$pluginName.PrintTemplate()var panel = hiprintTemplate.addPrintPanel({ width: 50, height: 30, paperNumberDisabled: true })// 这一行内容放文本， 对象属性名称为 : 'canshu1'panel.addPrintText({ options: { 'left': 7.5, 'top': 9, 'height': 15, 'width': 127.5, 'field': 'canshu1', 'testData': topText, 'hideTitle': true }})// 这一行内容放 条形码，对象属性名称为: 'canshu2'panel.addPrintText({ options: { 'left': 7.5, 'top': 28.5, 'height': 30, 'width': 105, 'field': 'canshu2', 'testData': code, 'textAlign': 'center', 'textType': 'barcode' }})// 将设计数据挂载在 div上hiprintTemplate.design('#hiprint-printTemplate2')// 打印， 注意数据对象 { 'canshu1': topText, 'canshu2': code } 名称要和上面设置的一样hiprintTemplate.print({ 'canshu1': topText, 'canshu2': code })}} 
}
</script>
<style lang='scss' scoped>
/**scoped 表示样式只在当前组件有效*/
</style>

官方所有 打印示例

这些示例都没有拖拽功能

Hi Print 源码 地址

官网

// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
// 想要实现拖拽设计页面,请往下看 '自定义设计'var hiprintTemplate = new this.$pluginName.PrintTemplate();var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
//文本
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
//条形码
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
//二维码
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
//长文本
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
//表格
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
//Html
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
//竖线//不设置宽度
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
//横线 //不设置高度
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
//矩形
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });//打印
hiprintTemplate.print({});
//直接打印，需要安装客户端
hiprintTemplate.print2({});