广州学习网站建设,网站设计开发收费标准,北京专业响应式网站建设,厦门集美区网站建设前言#xff1a; 1、本文档适合新手 2、文档仅限于基本的使用#xff0c;更深的高级应用请查阅相关资料 3、文档编写时相应功能都有测试过 4、教程文字代码有点多#xff0c;CSDN无法一篇文章发布#xff0c;所以拆分成若干篇 5、默默吐槽一句#xff1a;CSDN无法承载太大…前言 1、本文档适合新手 2、文档仅限于基本的使用更深的高级应用请查阅相关资料 3、文档编写时相应功能都有测试过 4、教程文字代码有点多CSDN无法一篇文章发布所以拆分成若干篇 5、默默吐槽一句CSDN无法承载太大的篇幅。所以我把教程导出为markdown文件有需要的各位自行下载。 https://cloud.189.cn/t/FviyyijY3uyu 访问码2gvs
*、编写教程时的一些环境
// 编写教程时的软件环境
node12.22.12
vue/cli: 5.0.8
vue3.2.36
// 参考资料
在线演示https://ccsimple.gitee.io/vue-plugin-hiprint/
微信文档https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzUyMzg5NDU0Mgactiongetalbumalbum_id2779135389855956995scene173subscenesessionidsvr_95b1d3bfd09enterid1703059529from_msgid2247484532from_itemidx1count3nolastread1#wechat_redirect
gitee地址https://gitee.com/CcSimple/vue-plugin-hiprint#vuevue3-%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A51、安装
// 编写此文档时版本为0.0.56
npm install vue-plugin-hiprint2、移植print-lock.css。
1、 安装完之后从目录node_modules/vue-plugin-hiprint/dist下将print-lock.css复制一份
2、 将复制的css文件放在index.html同级目录下。文件名称建议不要更改保持默认print-lock.css
3、在index中引入第二步创建的文件3、编写基本界面和实现基本打印功能 这里仅介绍最基本的一些功能其余功能看官方文档 https://mp.weixin.qq.com/s?__bizMzUyMzg5NDU0Mgmid2247484604idx1sna26f606cea93307fb533af45558c1b65chksmfa34eeddcd4367cbb7b28fed888d735cd6b9b26e79c2cb460021896f5c6ece2dc1ca0c5ea581cur_album_id2779135389654630403scene189#wechat_redirect 3.1、创建拖拽区域
!--基本代码 class必须加上ep-draggable-item用于后续ts代码识别tid是唯一编码。其中defaultModule开头的为默认的拖拽元素---
templatediv classcomponent refcomponentRefel-rowel-col :span6div classep-draggable-item tiddefaultModule.barcode条形码/divdiv classep-draggable-item tiddefaultModule.text文本/div/el-col/el-row/div
/templatescript langts setup
//ts-ignore
import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint;
import {onMounted, ref} from vue;
const componentRef ref();
const fullHeight ref();
hiprint.init({providers: [defaultElementTypeProvider()], // 声明拖拽元素否则无法正确识别HTML里编写的拖拽元素
});
onMounted(() {buildLeftElement();// 需要再onMounted里调用防止带有ep-draggable-item的HTML元素还未渲染完成
});
const buildLeftElement () {// ts-ignorehiprint.PrintElementTypeManager.buildByHtml($(.ep-draggable-item));// 这里就是上面的class。
};
/script// 完整demo代码
templatediv classcomponent refcomponentRefel-rowel-col :span6div classep-draggable-item tiddefaultModule.barcode条形码/divdiv classep-draggable-item tiddefaultModule.text文本/div/el-col/el-row/div
/template
script langts setup
//ts-ignore
import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint;
import {onMounted, ref} from vue;const componentRef ref();
const fullHeight ref();hiprint.init({providers: [defaultElementTypeProvider()],
});
onMounted(() {buildLeftElement();
});
const buildLeftElement () {// ts-ignorehiprint.PrintElementTypeManager.buildByHtml($(.ep-draggable-item));
};/script
style scoped langscss/style
3.2、编写设计区域包括画布区域以及配置区域 下面的代码已经完成了最基础的拖拽设计和属性配置 !--完整代码--
templatediv classcomponent refcomponentRefel-rowel-col :span6!-- 拖拽区域 --div classep-draggable-item tiddefaultModule.barcode条形码/divdiv classep-draggable-item tiddefaultModule.text文本/div/el-colel-col :span12 :styleborder: 1px solid #f0f0f0; padding: 20px;max-height: fullHeightpx;overflow: auto; !-- 画布区域 --div iddesign-content/div/el-colel-col :span6!-- 设计元素属性配置区域 --div iddesign-element-option-set/div/el-col/el-row/div
/template
script langts setup
//ts-ignore
import { hiprint, defaultElementTypeProvider } from vue-plugin-hiprint;
import {onMounted, ref} from vue;const componentRef ref();
const fullHeight ref();let _printDesignObj:any; // 无需响应式声明hiprint.init({providers: [defaultElementTypeProvider()],
});
onMounted(() {fullHeight.value componentRef.value.clientHeight;buildLeftElement(); // 构建拖拽元素buildDesigner(); // 构建画布和属性
});
const buildLeftElement () {// ts-ignorehiprint.PrintElementTypeManager.buildByHtml($(.ep-draggable-item));
};
const buildDesigner () {$(#hiprint-printTemplate).empty();_printDesignObj new hiprint.PrintTemplate({settingContainer: #design-element-option-set, // 设计元素属性配置区域});_printDesignObj.design(#design-content); // 画布区域
}/script
style scoped langscss/style3.3、尝试打印
// 在HTML中增加一个button并将click指向print事件
// 操作逻辑如下从拖拽区域拖拽文本到设计区域点击设计区域的文本元素在右侧属性区域基本选项卡下将字段名称改成print函数中的name。然后click一下button就可以看到效果function print() {// 打印数据key 对应 元素的 字段名let printData {name:CcSimple};
// 参数: 打印时设置 左偏移量上偏移量let options {leftOffset:-1,topOffset:-1}
// 扩展let ext {callback: () {console.log(浏览器打印窗口已打开)},styleHandler: () {// 重写 文本 打印样式returnstyle.hiprint-printElement-text{color:red !important;}/style}}
// 调用浏览器打印_printDesignObj.print(printData,options,ext);
}
