--- theme: devui-blue --- > [【vue-plugin-hiprint】](https://gitee.com/CcSimple/vue-plugin-hiprint "vue-plugin-hiprint")默认分支是`npm`包及`demo`的融合代码；对于部分新手来说有点难以下手。本篇开始以新的 `demo` 开始讲述如何开始使用`vue-plugin-hiprint`。 demo项目通过[create-vue](https://github.com/vuejs/create-vue "create-vue")创建。默认 `vue3`。如果你有哪些不清楚的，欢迎各位`留言反馈`。demo链接见文末。 ## 1.安装 ``` npm i vue-plugin-hiprint ``` 引入**打印样式**`print-lock.css` 1. 从`node_modules/vue-plugin-hiprint/dist/`目录下复制一份`print-lock.css`到静态资源目录`public`下 2. 在 `public/index.html` 中添加样式如下图： ![添加打印样式](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ad7ddcd13fe46aeb695db9943382b55~tplv-k3u1fbpfcp-zoom-1.image) > 这个`打印样式`是`必须`要引入的，否则会打印重叠，多出一页。如何检查是否引入成功呢？ 1. 浏览器`控制台`查看 ![控制台查看 html 文件](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a70b23c54fa492a9734ed9e34b10daf~tplv-k3u1fbpfcp-zoom-1.image) 2. 查看`print-lock.css`样式 ![正常引入效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8123fc108b644fd19a402189ca02db9d~tplv-k3u1fbpfcp-zoom-1.image) ## 2.构建可拖拽元素（自定义显示样式）这里以默认的 `defaultElementTypeProvider` 做示例。 > 如果想知道如何自定义可拖拽元素provider，请查看上一篇文章 [【vue-plugin-hiprint】如何自定义可拖拽元素provider](https://mp.weixin.qq.com/s?__biz=MzUyMzg5NDU0Mg==&mid=2247484532&idx=1&sn=4d76bd1545113e963453d11821044043&chksm=fa34ee15cd43670346c4ad52d0bca1e88eef6eff742da6012c802bfe4edb84767f0c9612511c#rd) ### 2.1 编写页面 ```html

基础元素

文本

图片

表格

``` 注意事项如下： - 必须先 `init` 对应 `provider` - `tid` 与 `defaultElementTypeProvider` 中对应 - 元素dom **必须包含** `class="ep-draggable-item"` ### 2.2 初始化provider并构建可拖拽元素 ```js ``` ## 3.构建设计器 `设计器`就是打印设计的画布。将元素拖入其中即可开始`拖拽设计`你的`打印模板`啦~ 首先插入一段 html 如下： ```html

``` 然后在对应时机去`构建(design)` ```js ``` `注意：`必须要在 `onMounted` 中去构建设计器。因为要先查找到该 `容器`。其中 `hiprintTemplate.design("#hiprint-printTemplate")` 就是去执行构建。传入的参数是 [jquery](https://jquery.com/ "jquery") 选择器。同理 `settingContainer` 也是插入 `jquery` 选择器。当执行完`design`后，我们将看到如下： ![设计器](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5ba53a7bccf409fa32845becd626ca7~tplv-k3u1fbpfcp-zoom-1.image) ## 4.打印通过前面步骤，我们可以获得如下页面： ![可拖拽元素、设计器及参数区域](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc8de7d253af4f189d435c5eb8d7c11d~tplv-k3u1fbpfcp-zoom-1.image) ok，如上图我们已经`拖入`了两个文本进入了`设计器`区域我们来试试打印↓ ### 4.1 浏览器打印调用浏览器打印功能进行打印： ```js // 打印数据，key 对应元素的字段名 let printData = {name:'CcSimple'}; // 参数: 打印时设置左偏移量，上偏移量 let options = {leftOffset:-1,topOffset:-1} // 扩展 let ext = { callback: () => { console.log('浏览器打印窗口已打开') }, styleHandler: () => { // 重写文本打印样式 return '' } } // 调用浏览器打印 hiprintTemplate.print(printData,options,ext); ``` 浏览器没有提供相关 API 所以`无法监听`用户`是否点击了打印` 如下图： ![浏览器打印](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c289eda733164535a16cdb83febf190a~tplv-k3u1fbpfcp-zoom-1.image) ### 4.2 直接打印 `直接打印`就是借助`直接打印客户端(electron)`进行静默打印。可以传入`electron`打印 API 相关参数。可以`监听是否成功传入打印机队列` 示例： ```js const print2 = () => { if (hiprint.hiwebSocket.opened) { hiprintTemplate.print2({}); } else { alert("请先连接客户端(刷新网页), 然后再点击「直接打印」"); } }; ``` > *print2*相关参数较多，`入门篇`先不一一列举。在接下来的文章中再详细列举。 ### 总结 - 打印样式`print-lock.css`必须正确引入 - 构建`可拖拽元素`一定要先 `init` 相关 `provider` - 构建`可拖拽元素`和`设计器`一定要在`挂载完dom后(onMounted)`执行 `入门篇`到此结束，`demo`中的代码会涉及到很多基础知识，所以`一定要学会自己查阅相关资料`。如有不清楚的可以加我微信，记得备注`start`，我好拉你进群: ![备注“start”拉你进群](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0141a669da1d4cdebbe94356c53ff735~tplv-k3u1fbpfcp-zoom-1.image) demo源码: [https://github.com/CcSimple/vue-plugin-hiprint-start](https://github.com/CcSimple/vue-plugin-hiprint-start) demo预览: [https://ccsimple.github.io/vue-plugin-hiprint-start/](https://ccsimple.github.io/vue-plugin-hiprint-start/)