马关县住房和城乡建设局网站,搜索引擎推广效果,网站安全建设目标,驻马店重点项目建设网站vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用安装相关依赖安装Hi PrintJQuery引入依赖简单使用官方所有 打印示例安装相关依赖
安装Hi Print
npm install vue-plugin-hiprintJQuery
因为 hi print 使用到了 JQuery 所以需要安装对应依赖
npm i jquery -…
vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用安装相关依赖安装Hi PrintJQuery引入依赖简单使用官方所有 打印示例安装相关依赖
安装Hi Print
npm install vue-plugin-hiprintJQuery
因为 hi print 使用到了 JQuery 所以需要安装对应依赖
npm i jquery --save-d引入依赖
在 main.js 中引入 依赖
/*** 打印插件 Hi Print a hrefhttps://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是 打印条形码其他的也差不多
!-- 标签设计页面 --
templatediv!-- 三个输入框内容 --input v-modelsn sizemini clearable keyup.enter.nativeconfirmPrintPrint /input v-modelmodel sizemini clearable keyup.enter.nativeconfirmPrintPrint /div!-- 打印设计挂载位置 --div idhiprint-printTemplate2 //div/div
/templatescript
// 这里可以导入其他文件比如组件工具js第三方插件jsjson文件图片文件等等
// 例如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 })// 这一行内容放文本 对象属性名称为 : canshu1panel.addPrintText({ options: { left: 7.5, top: 9, height: 15, width: 127.5, field: canshu1, testData: topText, hideTitle: true }})// 这一行内容放 条形码对象属性名称为: canshu2panel.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 langscss 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({});
